【分享】說說標準——CSS的錯誤解析規則

我說我的眼裏只有你 —— 景崗山

用這句歌詞來形容CSS的錯誤解析規則，我覺得再合適不過。CSS的錯誤解析規則的眼裏只有CSS標準，對其他的錯誤語法，大都採取直接忽略的態度，太**忠心了（此處省略三字）。

CSS跟我們所認識的其他語言，例如 JavaScript，一樣，也有自己的語法，它適用於任何版本的CSS，描述了CSS的核心句法(syntax)、關鍵字、廠商擴展、可用字符集、規則集合、聲明塊、選擇器、特性以及註釋等所有CSS的構成部分。是組成CSS的根本。詳細的資料，請參見：W3C CSS2.1中的 4.1 Syntax。

標準如同法律，有沒有是一回事，切身相關的人執不執行有是另一回事。不同的是，法律帶有強制性，標準就帶有妥協性。你按照標準寫，則可以正常的運作，否則，標準會根據它的錯誤解析規則，處理你的代碼，大多數時候，是丟棄錯誤部分。不可能說你CSS寫錯了，出了大錯就要斃掉，小錯就要改造。如果是那樣，估計沒人敢碰了……

那麼，CSS2.1中到底是如何處理錯誤的呢？
CSS語法規定了CSS的寫法，但是開發人員還是可能寫出不合CSS語法的代碼，這時候，瀏覽器就需要忽略一部分不合法的樣式表。
CSS2.1及所有後繼版本中，對於任何以破折號、下劃線開頭的property:value組合和不包含標識符的@-keywords組合，都以忽略的方式處理。
比如：

CSS code

div{ _height: 19px;}

上面存在下劃線開頭的特性值，按照規則，應該忽略這個聲明。
而只有IE6，以及IE7和IE8的兼容模式下會自動修復這個聲明，其他瀏覽器都忽略該聲明。
在IE6(Q)(S)/IE7(Q)/IE8(Q)中，最終會解析成：

CSS code

div{ height: 19px;}

補充一句，這就是著名的 IE CSS hack。

爲了保證新的屬性和值可以被正確添加，但遇到以下情況時，瀏覽器必須遵循以下的規則：
1. 未知的屬性
瀏覽器必須忽略帶有未知屬性的聲明。
如，

CSS code

p{yes:'good'}

yes不是CSS中已有的屬性，所以，應當忽略此聲明。
在所有瀏覽器中，該聲明都會被忽略。

2. 不合法的值
瀏覽器必須忽略帶有不合法值的聲明。
如，

CSS code

p{height:20}

height的值應該是一個數字後加一個單位構成的值。只有一個數字的值是不合法的。應當忽略。
雖然標準如此，但是這個值在IE/Opera/Firefox/Chrome/Safari的兼容性模式下有效，在它們的標準模式下才會被忽略。可見，兼容性模式下對其做了自動修復。

3. 畸形的聲明
當瀏覽器解析一個聲明時，讀取它的代碼直到這個聲明的結束，同時，檢查 (), [], {}, "", 和 '' 的匹配規則，並且正確的處理編碼，這時候，瀏覽器必須處理它所遇到的意外出現的標記。 怎樣處理？標準沒有明確指出。因爲針對不同的情況，應該採取不同的處理手段。很多兼容性問題也都是因爲標準沒說明白造成的！！
如，

CSS code

p{height} /* 丟失了 ”:” 和後面的值，此屬性應被忽略 */ ({)P{width:100px} /* 多餘的 ({)，此行應被忽略*/

這兩條聲明都是錯誤的，應該被忽略。
在所有的主流瀏覽器中，這兩個聲明都被忽略了。

4. 不可用的@關鍵字
如：

CSS code

@hello{...}

@hello不是標準中的@關鍵字。
所有瀏覽器都會忽略此聲明。

5. 樣式表的意外結束
瀏覽器必須自動閉合敞開的結構(如，塊，字符串和註解等)
如

CSS code

@media screen { p:before { content: 'Hello

應該解析爲：

CSS code

@media screen { p:before { content: 'Hello' } }

實際上，IE/Opera/Safari/Firefox/Chrome都沒有自動的修正。注意，IE8纔開始支持@media screen。
稍微修改一下：

CSS code

@media screen { p:before { content: 'Hello'

注意，現在Hello文本後增加了一個單引號。
這時，IE8的標準模式下，以及Firefox/Chrome/Safari/Opera都可以自動的添加未閉合的 "}"；IE其他版本和模式下不能修復是因爲不支持@media screen。

6. 字符串的意外結束
如，

CSS code

p { color: green; font-family: 'Courier New Times color: red; color: red; }

應被解析爲：

CSS code

p { color: green; color: red; }

但經過測試，只有Safari和Chrome裏，P 元素裏的文字是紅色的，其他瀏覽器裏都是綠色的，也就是說，Safari和Chrome裏，最終解釋成了：

CSS code

p { color: green; color: red; }

這是符合標準，正確的。
而在其他瀏覽器中，最終解析成了：

CSS code

p { color: green;}

將意外結束後的聲明全部忽略了。

喜歡深究的，請來這裏W3C CSS2.1 中 4.2

原文地址：

http://topic.csdn.net/u/20100714/10/a2ef50b1-306c-4539-9f51-e71978cb4700.html?32482