_米空格

å?ˆè§?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;}
}

原文地�：