Firefox下网页缩放时防止div被挤到下一层

http://wu110cheng.blog.163.com/blog/static/13334965420121120102439190/

Firefox下网页缩放时防止div被挤到下一层

问题：三个div，一个div中包含两个浮动带有border边框的div；且样式设计中保证两个div全部宽度之和等于外层div的宽度。在火狐下缩放网页显示比例小于100%时，会导致右边div被挤到下一行。

 

案例：

<style>

*{ margin:0; padding:0;}

#box{300px; height:200px; margin:0 auto;}

#a{148px; height:198px; background:#999; border:#F00 solid 1px; float:left;}

#b{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{300px; height:200px; margin:0 auto;}

#a{150px; height:200px; float:left;}

#a1{148px; height:198px; background:#999; border:#F00 solid 1px;}

#b{150px; height:200px; float:left;}

#b1{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