又见CSS BUG,昨天赶工写完一个页面,专题页面,又需要重用,没花太多时间处理细节上的东西,因为大部分模块都可以直接替换;今天早上同事和我说:“Safari 下面背景是不是有1px偏移?”,听完觉得挺奇怪,一般不应该存在这样的问题的,然后一看就有了这篇文章
首先重现BUG(此Demo仅CSS3支持,Chrome/Safari最佳):
<div class="t_shell">
<div class="t_wrap">
<div class="t_panel">
<div class="t_inner" title=".t_inner"></div>
</div>
</div>
</div>
.t_wrap{ background:#eee; margin:0 auto; width:401px;}
.t_panel{ background:-webkit-linear-gradient(top, #299a0b 0%,#299a0b 100%) no-repeat; background-position:50% 20px; padding:140px 0 0 0; height:140px;}
.t_inner{ background:-webkit-linear-gradient(top, #cf0404 43%,#ff3019 100%); margin:0 auto; height:120px; width:200px;}
点击“.t_wrap width +3px”按钮增加(div.t_wrap)宽度时候,能够很明显的看到绿色块(div.t_panel)有1px左右的来回摆动。
出现以上BUG的原因,国外“ACKO”给出的原因如下:
The width of the viewport
The odd/even size of the box/element
Background image is bigger/smaller than the viewport
Background image is padded evenly/unevenly around the box (1px difference). (*)
(*) Note that there is a choice whether to pad more on the left or on the right. I chose the left. This means that the last 4 rows of test cases are inherently ambiguous: a browser that misaligns all of these in the same fashion is in fact being consistent, just in the opposite direction.
原文地址:
解决方案:
在我测试过程中,发现基本上只要上面给出原因前面两条不出现,即:宽度不跟随视图变化,容器的宽度适中为偶数或者奇数;就可以有效避免
另外,在查找资料的过程中,发现另外一个解决方案,不过我根据我测试的好像不是很给力,当视图宽度变化时,依然能重现:
@media screen and (-webkit-min-device-pixel-ratio:0){
.t_panel{ background-position:50.001% 20px;}
}
原文地址:
共0评论