为什么Google Chrome浏览器会更改背景不透明度？

正如昆汀所说，这是一个IEEE浮点问题。

0.1 实际上，由于二进制的工作方式，实际上在十进制浮点数中实际上并不存在。

0.1是十分之一，即1/10。要以二进制形式显示，请使用二进制长除法将二进制1除以二进制1010：

如您所见，0.1在binary is中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编号
• 维基百科-IEEE浮点
• 维基百科-双精度浮点