移动端一个像素问题解决方案

1.方案一：

.weui-cell{

position:relative;

}

.weui-cell:before{

content:" ";

position:absolute;

left:0;

top:0;

right:0;

height:1px;

border-top:1pxsolid#e5e5e5;

color:#e5e5e5;

-webkit-transform-origin:00;

transform-origin:00;

-webkit-transform:scaleY(0.5);

transform:scaleY(0.5);

left:15px;

}

原理：父级设置相对定位，通过伪类来给父级添加子元素设置相对于父级的绝对定位，设置其高为一个像素，然后设置上边框也为一个像素，最后通过 CSS3 的 transform 属性把伪元素缩放为原来的一半大小。

2.方案二：

.mui-table-view-cell{

position:relative;

}

.mui-table-view-cell:after{

position:absolute;

right:0;

bottom:0;

left:15px;

height:1px;

content:'';

-webkit-transform:scaleY(.5);

transform:scaleY(.5);

background-color:#c8c7cc;

}

原理跟 方案一差不多，只不过 方案二 是通过背景来实现线条的展现。

当你把这两个 demo 在浏览器中放大到 400% 并且行高都设置为 1 时你会明显的看到这条一个像素的线并不是在两行文字的中间。要解决这个问题也非常地简单。我们拿 方案二为例子，只需要给 mui-table-view-cell 添加 padding-bottom: 1px; 就可以了。