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

上一篇:Java中的集合Queue、LinkedList、PriorityQueue(四)


下一篇:python3 三级菜单