CSS百分比中的小数位数

Question

好的，我已经搜索了很多地方，但除了零星的证据表明在CSS规范中对浮点数的精度没有推荐的标准行为外，没有找到更多信息。

请注意：我不是在问众所周知的子像素舍入问题。

我询问的原因是IE似乎将基于百分比的浮点值四舍五入到2位小数，而Webkit和Gecko允许至少3位甚至更多（我没有测试）。

例如：

li {
    width: 14.768%;
}

在Chrome的Web Inspector或Firebug中检查时，<li>元素的宽度显示为14.768％。然而，在IE dev工具（IE9 / 8/7模式）中，它们的宽度为14.76％。这导致基于像素的实际值完全不准确。

有人能解释一下这种行为，或者提供一个合适的解决方案吗？如果可能的话，我不想使用基于像素的值，因为内容需要是流体宽度。

我知道处理这么多小数位很棘手，但我很想知道这些浏览器中哪一个（如果有）是“正确的”？

编辑

Firefox在检查器中似乎使用了正确的百分比值（没有舍入到2个小数位），但在实际像素位置上展现了与IE相同的行为。

- chrisfrancis27

---

为什么需要三位小数精度？ - Evan Mulawski

我为一个流体宽度、响应式走马灯编写了一个插件。它的宽度和偏移都是通过将走马灯项数除以总数来完成的，但不幸的是，这可能会导致宽度达到3个小数位。 :/ - chrisfrancis27

如果你在CSS中需要三位小数精度，那么你做错了什么。 - AntonNiklasson

@AntonNiklasson 虽然我同意，但我仍然对 CSS 中浮点精度的任何官方规范感兴趣。我已经重构了插件，使用更少的 DOM 克隆，减少了元素数量，因此不再需要 3 位小数精度！ :) - chrisfrancis27

请查看以下答案：https://dev59.com/UW855IYBdhLWcg3wfUfQ - AntonNiklasson

@AntonNiklasson说某人做某事“不对”是没有帮助的。这是一个好/有趣的问题。几年后，我在编辑一个允许调整列宽度的开源数据表时遇到了它。使用2位小数精度会出现抖动，而使用更多位则会很平滑。因此，我来搜索一下是否有理由将宽度设置为四舍五入到2个小数位。了解规范、允许的内容以及它的行为方式是很重要的。 - patorjk

Answer 1

你的问题可能有很多解决方案，我建议以下几种：

1. 对除最后一个以外的所有内容四舍五入保留两位小数，然后从总宽度中减去最后一个的宽度。
2. 使用 table 或 display: table，浏览器会自动调整宽度。

- skobaljic

---

现在看来似乎已经过时了。 - Konrad

真的，与我的电脑相同 :) - skobaljic

Answer 2

如果有人遇到这个问题，这篇文章深入讲解了不同浏览器对于带小数点的百分比的处理方式：https://cruft.io/posts/percentage-calculations-in-ie/

至于哪个浏览器是正确的，根据那篇文章：

HTML5规范没有提到截断或四舍五入小数位。第11点涉及小数位，指出要一直循环，直到“位置超过输入的末尾，然后将值作为长度返回”。

- patorjk