-1 
<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 会下降。

4

1 回答 1

2

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

简单的例子：如果你在一个 99px 的容器中有三个 33px 宽的盒子，并且你缩小到 75%，那么盒子将是（四舍五入的）25 像素宽，而容器是 74 像素宽。那不合适！

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

见小提琴。（但请注意，不同的浏览器在不同的缩放系数上存在问题。显然，它们并非都以相同的方式四舍五入。哦，好吧，至少我们可以观察到存在问题。）

所以，我们能做些什么？好吧，有很多解决方案：

  1. 使容器更宽一些，或完全取消其宽度限制，使其与窗口一样宽。那么这些盒子将永远适合。小提琴。

  2. 作为替代方案，使容器成为内联块而不是给它一个宽度；这将确保它紧贴其内容。

    .container {
    display:inline-block;
}

    小提琴

  3. 给最右边的框一个负边距，大到足以抵消舍入误差。如果容器右侧不需要显示任何内容，则可以将此边距设置为任意大小，不会有任何影响。

    .child:last-child {
    margin-right:-100%
}

    小提琴。

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

于 2013-10-31T10:50:18.310 回答