Chrome「background：0」錯誤document.styleSheets中的cssText

我開發了一個Chrome擴展，它將所有CSS樣式應用到元素的「樣式」屬性（用於電子郵件等）。我發現在Chrome中一個奇怪的行爲與此css樣式：Chrome「background：0」錯誤document.styleSheets中的cssText

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中打開）：

它是Chrome有錯誤，或別的東西嗎？

2014-02-19 calibr

驗證你的CSS會抓住這個錯誤。 – cimmanon

不，這不是一個錯誤，要麼返回的值沒有錯。這就是Chrome如何嘗試修復無效的CSS。 Firefox似乎更聰明，而且IE在你的CSS前面完全沒有問題，它會返回button { background: 0px; }。

其實這個問題相當微不足道，瀏覽器如何處理無效代碼沒有標準。他們可以嘗試根據需要修改代碼，甚至忽略它。

修復程序將在規則中使用適當的值：

button { 
    background: none; 
}

2014-02-19 17:04:05 Teemu

但是，如果Chrome將此樣式識別爲： background-position：0px 50％;背景重複：初始初始化; 爲什麼它重置背景樣式backound-image：none或background-color：none？ – calibr

我不知道，就像我在回答中所說的那樣，瀏覽器可以根據需要處理無效的CSS。沒有規則，Chrome剛選擇這樣做。雖然我有一個評論，我說你重寫了上述屬性，因爲'background'只是元素背景所有屬性的快捷方式...... – Teemu

通過設置「背景：0;」您正在分配按鈕元件不正確的值。 Chrome瀏覽器必須以不同於其他瀏覽器的方式來解讀不正確的值。將「background：0;」更改爲「background：none;」，並且應該這樣做。

2014-02-19 16:35:29

回答