WebKit的百分比浮动bug：有没有任何解决方法？

Question

我发现WebKit在渲染带有边距的浮动元素宽度时出现了bug。

以下代码在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浏览器上，右侧会留下一像素的绿色：浮动元素不再完全填满它。当使用更多的浮动元素和边距时，问题似乎会加剧，留下更多未填充的空间。这是一个错误吗？舍入误差吗？这肯定不是我预期的结果。更重要的是，有什么办法可以解决这个问题吗？编辑：经过大量搜索，我发现这是一个已报告的错误；可能是一个舍入误差，正如我们所怀疑的：https://bugs.webkit.org/show_bug.cgi?id=5531。我的最重要的问题仍然存在：有没有办法绕过这个错误？

- jameshfisher

---

我只能用jQuery / JavaScript的暴力方法解决这个问题。而且它比你描述的更难以捉摸，尝试一个宽度为100px的div，其中包含三个浮动div，分别占33％，33％和34％。然后使div大小不同，看看四舍五入的效果。 - Nilloc

Answer 1

也许可以尝试这个？

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

- haejeong87

Answer 2

我怀疑这个问题没有什么神奇的解决方法。浏览器以不同的方式解释大小。这里有一个与此略微相关的问题here，这是我遇到的特定问题。还有更广泛的信息here。我曾经读过一篇很好的文章，非常准确地解释了这个问题，但我丢失了书签。我会尝试再次找到它，以便在这里发布。

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

然而，这取决于我使用的行高和字体大小的确切值，因此有时甚至在Firefox和IE之间或其他组合中也会出现差异。如果不使用条件CSS，我只能将问题减少到这两个组，并使用条件CSS来调整Opera和Chrome中的边距。

因此，总结一下，据我所知，恐怕您必须使用条件CSS。干杯！

- Rorok_89