CSS百分比中的小数位数

时间:2012-09-16 17:16:23

标签: css rounding percentage

好的,我已经进行了广泛的搜索,只提出了轶事证据,表明CSS规范中存在没有推荐标准行为的浮点数精度。< / p>

N.B。我不是在询问well known sub-pixel rounding problem

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

例如:

li {
    width: 14.768%;
}

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

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

我知道处理这么多的小数位是非常粗糙的,但是我很想知道这些浏览器中哪些是“正确的”?

修改

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

2 个答案:

答案 0 :(得分:5)

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

  1. 自己除了一个以外的所有小数点后2位小数,而不是从 最后一个的总宽度。
  2. 使用tabledisplay: table,而不是。{     浏览器将自行修复宽度。

答案 1 :(得分:0)

对于遇到此问题的任何人,本文都会深入介绍不同的浏览器如何对带有小数点的百分比进行处理:https://cruft.io/posts/percentage-calculations-in-ie/

根据该文章,关于哪种浏览器是正确的:

HTML5规范未提及截断或四舍五入小数 的地方。点11处理小数位,并表示继续循环 直到“位置超过输入的结尾”,然后以 长度”。