html当网页缩小时发生错位,css div浮动定位 网页缩放模块错位

满意答案

wolfok

推荐于 2017.12.16

采纳率：51%    等级：12

已帮助：26311人

我也是百度搜的答案：应该能解决你的问题：

在Firefox及IE8中出现同样的问题，IE7下不会出现该问题。

原因：Firefox及IE8中，在缩放网页显示比例小于100%时，对容器的border属性默认不做处理，仍为1px。这样两个div的最后总宽度仍大于外层宽度，动溢出到下一行。

解决方法：

A：折中方法，将设置外层div的宽度稍微大些；或者在内层两个div之间多留些间距(不使用marging或paddding填充间距)。

B：在内外层容器之间添加中间层，见下文

解决案例B：

*{ 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;}

缩放比例到50%以前不错位，30%又错位了。没有别的方法了么？

追答：他这个解决方案B里的中间层，仅做了浮动和大小限定，里面的是带样式的正文，这样做的话a、b层不含border，缩放不会出现错位，而里面的a1/b1不会影响中间层a、b的大小，就不会出现错位。

我觉得你这里的代码可以修改一下，用ul li包这几大个块，缩放我几乎没遇到过你的这个问题。：

举例：

• asdfasdf
• asdfasdf
• asdfasdf
• asdfasdf
• asdfasdf
• asdfasdf
• asdfasdf
• asdfasdf

style：

#cc li {

border:10px solid yellow;

width:200px;

height:100px;

float:left;

}

我觉得你的代码有问题，建议你帖出来让大家查查。

01分享举报