为什么Google Chrome会改变背景不透明度？

Question

我使用以下CSS规则来设置背景颜色div:

div {
    background-color: rgba(96, 96, 96, .1);
}

在开发者工具的"计算"标签中的Google Chrome v.42中,我看到了这个结果rgba(96, 96, 96, 0.0980392);.我认为,它看起来像一些网络工具包优化......

在FireFox v.36中,计算出的背景颜色等于 rgba(96, 96, 96, 0.1)

我做了一个简单的http://jsfiddle.net/sergfry/c7Lzf5v2/,它显示了它的实际效果.

那么,我可以阻止Google Chrome中的不透明度变化吗？

谢谢!

Answer 1

如Quentin所述,这是一个IEEE浮点问题.

0.1 实际上,由于二进制的工作方式,它实际上并不存在于十进制浮点中.

0.1是十分之一,或1/10.要以二进制形式显示它,使用二进制长除法将二进制1除以二进制1010:

在此输入图像描述

正如你所看到的,0.1在二进制中0.0001100110011....0011它将继续重复0011到无穷大.

浏览器将选择最接近的可用点,0.1并将其用作不透明度.有些人会过去,有些人会失败.

FireFox我猜它只是显示人类可读的版本,但实际上,它真的使用计算机可用的浮点.

举个例子:

body {
    color: rgba(0,0,0,0.1); // actually 0.0980392
    opacity: 0.1; // actually 0.100000001490116
}

对于完全相同的浮点,两个完全不同的值.

这个浮点问题实际上可以使用其他语言(如Javascript)在浏览器中的其他位置进行复制.Javascript数字总是64位浮点数(我相信CSS也是如此).这通常称为双精度浮点.PHP还使用双精度浮点.

您可以猜测64位浮点数,以64位存储,其中数字(分数)存储在位0到51中,指数位于位52到62中,符号位在位63中.

这会引起问题,因为它意味着整数只计算精确到15个小数点,并且实际上只能计算多达17个小数点.

这意味着数字可以很容易地向上舍入,或者可能无法正确存储.

var x = 999999999999999;  // x = 999999999999999
var y = 9999999999999999; // y = 10000000000000000

浮点运算也可能在某些地方也没有对齐.正如我上面所示; 0.1十进制不是实际的,0.1但0.000110011...依此类推.这意味着一些基本数学可能完全错误.

var x = 0.2 + 0.1; // x = 0.30000000000000004

您最终不得不混淆系统以获得您真正想要的数字.这可以通过*数字来完成10,然后将其除以得到您想要的实际结果.

var x = (0.2 * 10 + 0.1 * 10) / 10; // x = 0.3

计算机浮点内的精度非常困难,当有多个不同的实现(或浏览器)试图尽力提高速度并显示正确给出的信息时,更加困难.

关于浮点有很多不同的信息,以及CSS处理器(或者我预期的JS可能会有相同的计算结果)可能试图实现的信息.