19

好的,我进行了广泛搜索,并提出了一些轶事证据,表明CSS 规范中没有针对浮点数精度的推荐标准行为。

注意我不是在问众所周知的亚像素舍入问题

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

例如:

li {
    width: 14.768%;
}

在 Chrome 的 Web Inspector 或 Firebug 中检查时,<li>正确显示 s 的宽度为 14.768%。但是,在 IE 开发工具(IE9/8/7 模式)中,它们的宽度为 14.76%。这会导致实际的基于像素的值也完全消失。

任何人都可以阐明这种行为,或提供合适的解决方法吗?如果可能的话,我宁愿不必诉诸基于像素的值,因为内容需要是流动的宽度。

我知道处理这么多小数位非常麻烦,但我很想知道这些浏览器中的哪个(如果有的话)是“正确的”?

编辑

Firefox在检查器中显示时似乎使用了正确的百分比值(未四舍五入到小数点后 2 位),但在实际像素位置方面显示与 IE 相同的行为。

4

2 回答 2

5

您的问题可能有很多解决方案,我建议这些:

  1. 除一位外,您自己四舍五入两位小数,而不是从最后一位的总宽度减少。
  2. 使用tableor display: table,而不是浏览器将自行修复宽度。
于 2012-10-27T20:23:12.737 回答
1

对于遇到这个问题的任何人,本文深入探讨了不同浏览器对小数点百分比的作用:https ://cruft.io/posts/percentage-calculations-in-ie/

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

HTML5 规范没有提到截断或舍入小数位。第 11 点处理小数位,并表示要继续循环,直到“位置超过输入末尾,然后返回值作为长度”。

于 2020-06-14T19:16:33.110 回答