_米空格

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

原文地址：