retina下的1px边框实现的一些问题

retina屏下的1px边框目前已经有不少种方案，这篇文章列的比较详细。我自己使用的是通过:after和:before伪类的transform: scale(0.5)去实现，但是也遇到了一些问题：

z-index的影响

这个问题只在iPhone 6及以上出现。在Chrome下的Apple iPhone 6模式中打开这个例子，反复点击第一个白色区域，就可以看出中间两条线会隐藏/显示。

click事件所做的只是切换#detailInfo元素的z-index:1属性。

很遗憾目前没有找到具体的触发条件，但是强制指定要设置边框的DOM节点z-index:1就可以避免这种情况。设置为 1 是为了避免层级关系产生的不必要BUG，如果实际场景需要为更大值亦可。

.lineTop, lineBtm{
    position: relative; z-index: 1;
}
.lineTop:before{
    content: "; background: #000;
    position: absolute; left: 0; right: 0; top: 0;
    height: 1px; -webkit-transform: scaleY(0.5);
}

.lineBtm:after{
    content: "; background: #000;
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; -webkit-transform: scaleY(0.5);
}

和clearfix类同时出现

一般的clearfix方法原理也是:after伪类，如：

.clear:after{
    content:"; display: block; height: 0; clear: both; visibility: hidden;
}

如果出现同时使用的场景，比如``````，则需要注意:

1. position: absolute会使:after元素脱离文档流，导致.clear失效
2. .clear默认的visibility: hidden需要改成visibility: visible，否则边框不显示

第一个问题比较麻烦，目前没有普适的解决办法，只能具体问题具体分析了。比如没有底部内边距的话，可以覆写成position: static；

第二个问题，可以通过另外的clearfix方法规避：

.clear:after{
    content:"; display: table; clear: both;
}

最后更新时间： 2016-05-04 17:03:47