WebKit 的百分比浮动错误：有啥解决方法吗？

Posted 2023-03-06

【中文标题】WebKit 的百分比浮动错误：有啥解决方法吗？

【英文标题】：WebKit's percent-sized floats bug: are there any workarounds?WebKit 的百分比浮动错误：有什么解决方法吗？

【发布时间】：2011-03-10 17:28:33

【问题描述】：

我在 WebKit 渲染浮动元素的宽度时遇到了一个错误，当它们有边距时。

以下在 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

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

【问题讨论】：

我只能通过暴力破解（使用 jquery/javascript）解决问题。而且你描述的更阴险，尝试一个 100 像素宽的 div，三个浮动 div 分别为 33%、33% 和 34%。然后把 div 做成不同的大小，看四舍五入的乐趣。

【参考方案1】：

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

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

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

所以，总而言之，据我所知，恐怕您必须使用条件 CSS。干杯！

【参考方案2】：

也许是这样的？

<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>