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