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

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

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

在开发者工具的“计算”选项卡中的Google Chrome v.42中,我看到这个结果rgba(96,0.0980392);.我认为,它看起来像一些网络工具包优化…

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

那么,我可以防止Google Chrome中的不透明度改变吗？

谢谢！

如昆汀所说,这是一个IEEE浮点问题.

由于二进制的工作原理,0.1技术上实际上并不存在于十进制浮点中.

0.1是十分之一或1/10.要用二进制表示,用二进制1010分割二进制1,使用二进制长除法：

正如你所看到的,二进制中的0.1是0.0001100110011 …. 0011,并且将在末尾重复0011到无穷大.

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

FireFox我会猜测它只是显示人类可读版本,但在现实中,它真的使用电脑可用的浮点数.

举个例子：

body {
    color: rgba(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可能会相同)可能正在尝试实现.

猜你在找的CSS相关文章