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

Question

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

button{
    background: 0;
}

当我阅读此规则的cssText时，在document.styleSheets中得到：

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

但这是错误的，因为我没有覆盖background-color或background-image属性。 奇怪的是，应用背景后，按钮的背景实际上为“ none”：0，仅使用cssText发出。

在Firefox中，我得到：

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

没关系

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

JS·菲德尔

是Chrome错误还是其他？

Answer 1

通过设置“ background：0; ”，您为按钮元素分配了不合适的值。 Chrome浏览器必须以与其他浏览器不同的方式解释该不当价值。 将“ background：0; ”更改为“ background：none; ”，这应该可以解决问题。

Answer 2

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

实际上，这个问题很简单，浏览器如何处理无效代码没有标准。 他们可以尝试根据需要修复代码，甚至可以忽略它。

解决方法是在规则中使用适当的值：

button {
    background: none;
}