Chrome“背景：0”document.styleSheets中的错误cssText答案

【问题标题】：Chrome "background: 0" wrong cssText in document.styleSheetsChrome“背景：0”document.styleSheets中的错误cssText
【发布时间】：2014-03-20 03:04:20
【问题描述】：

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

button{
    background: 0;
}

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

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

但这是错误的，因为我没有覆盖 background-color 或 background-image 属性。奇怪的是，在应用 background: 0 后，按钮的背景实际上是“无”，只有 cssText 才有问题。

在 Firefox 中我得到：

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

没关系。

JS Fiddle Demo（在 Chrome 中打开）：

JS Fidle

是 Chrome 的 bug 还是别的什么？

【问题讨论】：

验证你的 CSS 会发现这个错误。

标签： javascript html css google-chrome webkit

【解决方案1】：

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

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

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

button {
    background: none;
}

【讨论】：

但如果 chrome 将此样式识别为： background-position: 0px 50%;背景重复：初始初始；为什么它会像样式 backound-image:none 或 background-color: none 一样重置背景？
我不知道，就像我在回答中所说的那样，浏览器可以根据需要处理无效的 CSS。没有规则，Chrome 只是选择这样做。不过我有一条评论，其中我说您正在覆盖上述属性，因为background 只是元素背景所有属性的快捷方式......

【解决方案2】：

通过设置“background: 0;”，您为 button 元素分配了不正确的值。 Chrome 必须以不同于其他浏览器的方式解释该不正确的值。将 "background: 0;" 更改为 "background: none;" 就可以了。

【讨论】：