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;
}
if updatedAt !== null
p 最后更新时间: 2016-05-04 08:00:00