标签:order 边框 样式 orm otto color top 解决办法 pos
由于手机dpr(设备像素比)的问题,webapp中经常会出现1像素边框的问题,解决办法如下
//以下代码是使用sylus实现
border-1px($color){
position:relative;
&:after{
display:block;
position:absolute;
left:0;
bottom:0;
border-top:1px solid $color;
content:‘ ‘;
width:100%;
}
}
//解决办法
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
以上代码可设置在公共样式中,使用示例
<div class="tab border-1px"></div>
标签:order 边框 样式 orm otto color top 解决办法 pos
原文地址:http://www.cnblogs.com/ouchen0312/p/7161801.html