CSS 背景居中次像素无法重合 - 凡事预则立,不预则废

又见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;}
}

原文地址:

Tags:CSS前端

0评论

发表评论

最新评论及回复

    loading

最近发表

    loading

网站分类

    loading

文章归档

    loading

友情链接

Top Comments Footer