document.styleSheets中的Chrome“background：0”错误的cssText

Question

我开发了一个Chrome扩展程序，它将所有CSS样式应用于元素的“样式”属性（用于电子邮件等）。我在Chrome中发现了一种使用此CSS样式的奇怪行为：

button{
    background: 0;
}

在document.styleSheets中，当我读到这条规则的cssText时，我得到了：

button { background-position: 0px 50%; background-repeat: initial initial; }

但这是错误的，因为我没有覆盖背景颜色或背景图像属性。 奇怪的是，应用background：0后，按钮的背景实际上是“none”，只发出cssText。

在Firefox中我得到：

button { background: none repeat scroll 0px center transparent; }

哪个好。

JS Fidle演示（在Chrome中打开）：

JS Fidle

是Chrome还是别的什么？

Answer 1

通过设置“ background：0; ”，您将为按钮元素指定一个不正确的值。 Chrome必须以不同于其他浏览器的方式解释该不正确的值。将“ background：0; ”更改为“ background：none; ”，这应该可以解决问题。

Answer 2

不，这不是错误，返回的值都没有错。这是Chrome尝试修复无效CSS的方式。 Firefox似乎更聪明，IE在CSS面前完全没用，它返回button { background: 0px; }。

实际上这个问题非常简单，浏览器应该如何处理无效代码没有标准。他们可以尝试按照自己的意愿修改代码，甚至可以忽略它。

修复方法是在规则中使用适当的值：

button {
    background: none;
}