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

时间:2014-02-19 16:23:09

标签: javascript html css google-chrome webkit

我开发了一个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还是别的什么?

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

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

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

button {
    background: none;
}