Chrome 在 document.styleSheets 中"background: 0"错误的 cssText

Question

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

button{
    background: 0;
}

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

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

但这是错误的，因为我不会覆盖背景颜色或背景图像属性。奇怪的是，应用背景后按钮的背景实际上是"无"：0，仅与cssText有关。

在火狐中，我得到：

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

这没关系。

JS Fidle Demo（在Chrome中打开）：

JS 菲德尔

是铬错误还是别的什么？

Answer 1

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

实际上这个问题是微不足道的，浏览器应该如何处理无效代码没有标准。他们可以尝试随心所欲地修复代码，甚至可以忽略它。

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

button {
    background: none;
}

Answer 2

通过设置"background： 0;"，您正在为按钮元素分配不正确的值。Chrome 必须以与其他浏览器不同的方式解释该不当值。将"背景：0;"更改为"背景：无;"，这应该可以解决问题。