http://wu110cheng.blog.163.com/blog/static/13334965420121120102439190/
Firefox下网页缩放时防止div被挤到下一层
问题:三个div,一个div中包含两个浮动带有border边框的div;且样式设计中保证两个div全部宽度之和等于外层div的宽度。在火狐下缩放网页显示比例小于100%时,会导致右边div被挤到下一行。
案例:
<style>
*{ margin:0; padding:0;}
#box{width:300px; height:200px; margin:0 auto;}
#a{width:148px; height:198px; background:#999; border:#F00 solid 1px; float:left;}
#b{width:148px; height:198px; background:#999; border:#F00 solid 1px; float:left;}
</style>
<div id="box">
<div id="a"></div>
<div id="b"></div>
</div>
在Firefox及IE8中出现同样的问题,IE7下不会出现该问题。
原因:Firefox及IE8中,在缩放网页显示比例小于100%时,对容器的border属性的缩放处理未保持等比例。这样两个div的最后总宽度仍大于外层宽度,自动溢出到下一行。
解决方法:
A:折中方法,将外层div的宽度设置稍微大些;或者在内层两个div之间多留些间距(不使用marging或paddding填充间距)。
B:在内外层容器之间添加中间层,见下文
解决案例B:
<style>
*{ margin:0; padding:0;}
#box{width:300px; height:200px; margin:0 auto;}
#a{width:150px; height:200px; float:left;}
#a1{width:148px; height:198px; background:#999; border:#F00 solid 1px;}
#b{width:150px; height:200px; float:left;}
#b1{width:148px; height:198px; background:#999; border:#F00 solid 1px;}
</style>
<div id="box">
<div id="a"><div id="a1"></div></div>
<div id="b"><div id="b1"></div></div>
</div>
其他类似缩放问题同理。
经目测,当前市面未普及涉及页面缩放功能的web标准,因此大多数涉及该部分内容的web页面均存在该bug