WebKit 的百分比大小 float 错误 : are there any workarounds?

Question

当 float 元素有边距时，我遇到了 WebKit 渲染 float 元素宽度的错误。

以下呈现在 Firefox (3.6) 和 WebKit (Chromium 5.0) 中的预期效果:

<div style="width: 100%; background-color: green;">
    <div style="background-color: red; float: left; width: 50%;">n</div>
    <div style="background-color: red; float: left; width: 50%;">n</div>
    <div style="clear: both;"></div>
</div>

也就是说，作为一个完全红色的盒子，没有绿色背景显示。

现在试试这个:

<div style="width: 100%; background-color: green;">
    <div style="background-color: red; float: left; width: 40%; margin-left: 10%;">n</div>
    <div style="background-color: red; float: left; width: 50%;">n</div>
    <div style="clear: both;"></div>
</div>

预期与之前相同，除了左侧框的 10% 为绿色。这是在 Firefox 上看到的。

但是，在 WebKit 浏览器上，框的右侧会留下一个绿色像素: float 元素不再完全填满它。

当使用更多的 float 和 margin 时，问题似乎更加复杂，留下更多的金额没有归档。

这是一个错误吗？舍入错误？这当然不是我所期望的。更重要的是，我能做些什么来解决它？

编辑:经过大量搜索，我发现这是一个已报告的错误；可能是怀疑的舍入错误: https://bugs.webkit.org/show_bug.cgi?id=5531

我最重要的问题仍然存在:有没有办法解决这个错误？

Answer 1

我怀疑对此没有神奇的解决方法。浏览器以数学上不同的方式解释大小。还有一个与此略有关系的问题 here ，这是我遇到的特殊问题。有更广泛的信息here .我曾经读过一篇很好的文章，非常准确地解释了这个问题，但我丢失了书签。我会尝试再次找到它，以便我可以将其张贴在这里。

本质上，不同的浏览器以不同的方式舍入十进制像素值。因此，简短的回答是，只要存在这种差异，您就永远无法获得准确的跨浏览器解决方案。我遇到的特殊问题是我的第一个链接中描述的问题:即使不使用百分比值(固定像​​素大小)，我也遇到浏览器之间的 2 个“边”，其中某些元素的垂直对齐方式会有所不同:Firefox 和 Internet Explorer ，一方面，Opera、Chrome 和 Safari 另一方面。

然而，这取决于我使用的 line-height 和 font-size 的确切值，所以有时我会在 Firefox 和 IE 或其他组合之间得到差异。没有使用条件CSS，我只能将问题缩小到那2组，然后在Opera和Chrome中使用条件CSS来调整边距。

所以，总而言之，据我所知，恐怕您将不得不使用条件 CSS。干杯!