为什么谷歌浏览器会改变背景不透明度？

Question

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

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

在 Google Chrome v.42 的开发人员工具的“计算”选项卡中，我看到了这个结果 rgba(96, 96, 96, 0.0980392);。我认为，它看起来像是一些 web-kit 优化...

在 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 计算可能相同）可能试图实现的目标有很多不同的信息。

• Exploring Binary - Why 0.1 does not exist
• Javascript Numbers
• Wikipedia - IEEE floating point
• Wikipedia - Double-precision floating point