Question

<body style="padding:0px; margin:0px;">
      <div style="width:1016px;">
        <div style="width:8px; height:100px; background:red; width:8px; float:left;"></div>
        <div style=" float:left; border:#ccc solid 1px; height:100px; padding:20px; width:958px;">
            testing 1016=8+1000+8
        </div>
        <div style="background:red; height:100px; width:8px; float:left;"></div>
        <div class="clear"></div>
    </div>
</body>

在我的html / css中，当浏览器缩放时，为什么最后一个div会停止。

Answer 1

正如我在评论中所说，问题是缩放时的像素舍入误差。

简单示例：如果在99px容器中有三个33px宽的盒子，并且缩小到75％，则盒子（圆形）宽25像素，而容器宽74像素。这不合适！

.container {
    width:99px;
}
.child {
    float:left; width:31px; height:31px; 
    border:1px solid #666;
}

见fiddle。（但请注意，不同的浏览器在不同的缩放因子上存在问题。显然，它们并非都以相同的方式完成。哦，至少我们可以观察到存在问题。）

那么，我们能做什么？嗯，有很多解决方案：

使容器稍微宽一点，或完全删除其宽度约束，使其与窗口一样宽。然后盒子总是适合。 Fiddle
作为替代方案，使容器成为内联块而不是给它一个宽度;这将确保它紧贴其内容。
```
.container {
    display:inline-block;
}
```
Fiddle
给最右边的框留一个负边距，大到足以抵消舍入误差。如果您不需要在容器右侧显示任何内容，则可以根据需要设置此边距，这不会产生任何影响。
```
.child:last-child {
    margin-right:-100%
}
```
Fiddle

还有更多解决方案，但我相信这些会让你开始。祝你好运！

当paze是浏览器缩放时，Div下降

1 个答案: