Question

假设我在容器中有三个宽度为Option value is 1.4666的{{1}}：

div

33.3%

我可以在现代浏览器（Firefox，Chrome，Opera）中声明，对于任何用户缩放，三个内部div.container { width: 100%; height: 100px; } div.inner { width: 33.3%; height: 100px; float: left; }的总宽度将是＆lt; =容器宽度？换句话说，是否会出现这样的情况，即由于它们的总宽度超过了容器宽度？

Answer 1

数学上你是正确的，如果肉眼可见，我强烈怀疑它，我会说在大多数情况下，舍入差异将会丢失。但是，如果你想确保浏览器确实照顾并真正填写整个div，你可以使用flexbox：

div.container {
  width: 100%;
  height: 100px;
  display:flex;
}

div.inner {
 flex-grow:1;
  height: 100px;
  float:left;
}

<div class="container">
    <div class="inner" style="background-color:red;"></div>
    <div class="inner" style="background-color:yellow;"></div>
    <div class="inner" style="background-color:black;"></div>
</div>

我个人更喜欢flexbox over float div，百分比宽度，这使得添加/删除div更容易，但这是个人喜好。

Answer 2

大多数浏览器将小数像素向下舍入，但不是全部。在这里，通过浏览器我也指每个浏览器的每个版本，因为任何浏览器的不同版本可以不同地处理分数像素。因此，从理论上讲，您的三个33.3%框可能会在某些浏览器的某个版本中溢出其父容器。

考虑一下，浏览器必须满足不能同时满足的约束。你的三个33.3％的例子在数学上将是99.9％，所以让我们将它改为四个25％恰好是100％，仅仅是为了举例：

宽度为25％的4个框应占据相同的像素数。
4个框应该正好在容器的边缘结束。不应该有一个额外的像素（并且它们不应该被包裹）。
4个盒子应该始终在视觉上相互接触。不应该有间隙或重叠。

同时很难满足所有这些约束，因此不同的浏览器（以及每个浏览器的不同版本）尝试以不同的优先级满足这些约束。这意味着如果您在不同的浏览器中呈现完全相同的页面，它可能看起来略有不同。不同的将是非常难以注意到的，因为它只是一个或两个像素，但如果你比较它们并仔细观察，你会看到它。

这是一篇很好的文章/实验：Browser Rounding and Fractional Pixels。

Answer 3

你能做的一件事就是使用两个小数位 - 即33.33%而不是33.3%。这将减少任何舍入问题的误差范围。

一旦达到这种精确度，舍入不太可能是一个问题，但如果你仍然有问题，或者你只是想要精确，你总是可以这样做：

div.inner {
  width: 33.33%;
  height: 100px;
  float:left;
}
div.inner:last-child {
  width: 33.34%;
}

...覆盖最后一个元素，使其最多加起来为100％。

总体而言，最好的选择可能是停止使用花车;除非您需要支持古老的IE版本，否则现在有更好的选择来构建这种布局。

CSS中元素宽度的四舍五入

3 个答案: