为什么谷歌Chrome会改变背景透明度？

Question

我使用下面的CSS规则设置div的背景色

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

在GoogleChromev.42中，在开发工具的“计算”选项卡中，我看到了这个结果rgba(96, 96, 96, 0.0980392);。我想，这看起来像是网络套件的优化.

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

我制作了一个简单的http://jsfiddle.net/sergfry/c7Lzf5v2/，显示了它的作用。

那么，我能防止谷歌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，如我所预期的那样，计算将是相同的)可能试图达到的目标。

• 探索二进制-为什么0.1不存在
• Javascript数
• Wikipedia - IEEE浮点数
• 维基百科-双精度浮点