CSS百分比中的小数位数



好吧,我搜索了很多地方,只找到了一些轶事证据,表明CSS规范中没有推荐的浮点数字精度标准行为。

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

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

例如:

li {
width: 14.768%;
}

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

有人能阐明这种行为吗,或者提供一个合适的解决方法吗?如果可能的话,我宁愿不使用基于像素的值,因为内容需要是流动的宽度。

我知道处理这么多小数点很难,但我很想知道这些浏览器中哪一个(如果有的话)是"正确的"?

编辑

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

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

  1. 除一位小数外,所有小数均由您自己四舍五入,而不是从最后一个的总宽度
  2. 使用tabledisplay: table,而不是浏览器将自行修复宽度

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

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

HTML5规范没有提到截断或舍入小数地方。第11点涉及小数点,并表示要保持循环直到"位置超过输入结束,然后将值返回为长度"。

最新更新