Question

css div浮动定位 网页缩放模块错位

正常

缩放后





Answer 1

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

在Firefox及IE8中出现同样的问题，IE7下不会出现该问题。
原因：Firefox及IE8中，在缩放网页显示比例小于100%时，对容器的border属性默认不做处理，仍为1px。这样两个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>

追问

中间层的意义是什么？
缩放比例到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;
}
我觉得你的代码有问题，建议你帖出来让大家查查。

Answer 2

宽度用像素px单位，按 sichuanlee 说的用百分百对你开说就更麻烦了，等你以后用熟css了再去考虑百分百的事情吧。

这3个框，外面要有个div框起来(如果没有就加一个)：
<div class="layout-center">
<div>策划_you_htmlcode</div>
<div>托管_you_htmlcode</div>
<div>优化_you_htmlcode</div>
</div>

然后给 .layout-center 这个 class 写一个样式：
让它宽度等于你网页最大宽度(蓝色那张图片宽度应该就是最宽)，也许是width=1004px。
然后你里面3个盒子的宽度+边框+外边距的尺寸总和加起来不超过上面的最大宽度，这个情况就不会出现了。

你可能还需要解决的其他问题：双倍浮动边bug、清除浮动；

具体代码自己动手慢慢解决吧，不会的网上找答案，不要问，尽量自己独立解决，这样你才学得快。

追问

谢谢，我的策划、托管、优化三个框不是最大宽度，旁边还有个“新闻”， 前边三个框我加了大框了，缩放还是变形，是不是还要在外边加一个更大的把四个全部包括？

Answer 3

你宽度是怎么写的呀？

Answer 4

宽充用百分比来做.