§ ITPOW >> 文档 >> CSS

作者：vkvi 来源：ITPOW（原创） 日期：2016-10-10

浏览器缩放时，有些网页看起来是按比例缩小了，有些是布局乱了，原来一排显示三个区块的，现在只能显示两个区块了，什么原因、怎么解决呢？

这是由于区块有边框，而缩放时边框宽度并没有等比例缩放，所以算出来时与总尺寸对不上，就掉下去了。

解决办法就是用背景来代替边框（或者干脆不要边框？）。

<!--缩小网页布局要乱--> <div style="width:200px; overflow:hidden; zoom:1;"> <div style="float:left; width:100px; background:#f00;">left</div> <div style="float:left; border:1px solid #0f0; width:98px; background:#00f;">right</div> </div> <!--缩小网页布局不乱--> <div style="width:200px; overflow:hidden; zoom:1;"> <div style="float:left; width:100px; background:#f00;">left</div> <div style="float:left; width:100px; background:#0f0;"> <div style="margin:1px; background:#00f;">right</div> </div> </div>

如下是 100% 时候显示的情况，可以看到两排都显示正常：

再看看缩小到 90% 的情况，可以看到最后一排是正常显示的：