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