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：

enter image description here

正如您所看到的，二进制文件中的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中。 / p>

这会引起问题，因为它意味着整数只计算精确到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可能计算结果相同）可能试图实现的目标。