retina屏下的1px边框目前已经有不少种方案，这篇文章列的比较详细。我自己使用的是通过:after和:before伪类的transform: scale(0.5)去实现，但是也遇到了一些问题：
这个问题只在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方法原理也是:after伪类，如：
.clear:after{
content:"; display: block; height: 0; clear: both; visibility: hidden;
}
如果出现同时使用的场景，比如，则需要注意:
position: absolute会使:after元素脱离文档流，导致.clear失效.clear默认的visibility: hidden需要改成visibility: visible，否则边框不显示第一个问题比较麻烦，目前没有普适的解决办法，只能具体问题具体分析了。比如没有底部内边距的话，可以覆写成position: static；
第二个问题，可以通过另外的clearfix方法规避：
.clear:after{
content:"; display: table; clear: both;
}