html - 为什么 Google Chrome 会更改背景不透明度？

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 float 问题。

0.1 在技术上实际上并不存在于十进制 float 中，这仅仅是因为二进制的工作方式。

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

如你所见，0.1 在二进制中是 0.0001100110011....0011 并且它会在末尾不断重复 0011 直到无穷大.

浏览器将选择最接近 0.1 的可用点，并将其用作不透明度。有些会过去，有些会倒下。

FireFox 我猜它只是显示人类可读的版本，但实际上，它实际上使用的是计算机可用的 float 。

举个例子:

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

完全相同的 float 的两个完全不同的值。

这个浮点问题实际上可以在使用其他语言(例如 Javascript)的浏览器中的其他地方复制。 Javascript 数字始终是 64 位 float (我相信 CSS 也是如此)。这通常称为 double float 。 PHP 还使用 double float 。

64 位 float 如您所猜，以 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

计算机浮点精度非常困难，当有多种不同的实现(或浏览器)试图尽最大努力提高速度并正确显示给定的信息时，精度会更高。

关于 float 以及 CSS 处理器(或我预期的 JS 可能计算相同)可能试图实现的目标，有很多不同的信息。

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