IE CSS Bug系列：:first-line中帶有!important的規則被忽略

rubyisapm發表於2013-09-30
CSSImport

伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@rubyisapm 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）

【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。

—————————————————————————–

影響版本

受此bug影響的瀏覽器版本：IE8

表現

如果使用了!important字尾，:first-line偽類內部的規則會被完全忽略

教程日期

2009.7.30 17:35:14 星期四

描述

這是一個類似於 :first-letter !important Rule Ignore Bug 的bug；本來應該在同一個教程裡記錄下來的，但我當時並沒有立刻發現它，基於某些原因我把這個bug釋出成了一個單獨的教程…所以就這樣吧。

假設你在使用:first-line偽元素，並且（出於一些奇怪的原因）又為強化規則的明確性而增加了!important字尾。其他的瀏覽器都執行得很好，唯有IE8決定反叛並完全忽略了此規則——不僅僅是忽略!important，而是整個規則。隨後你開始加入第二個和第三個!important希望可以修正這個問題，唉，可這條路是走不通的:) 來看演示吧：

 

演示

因為此bug的特性，演示放在一個單獨的頁面上檢視

HTML Code：

CSS Code:

 

在IE8中，段落的第一行實際上是斜體帶下劃線的，這說明它並沒有完全忽略:first-line規則集。但是，其他三個有!important字尾的規則被忽略了。正如我前面所說，你那些帶!important的規則是否覆蓋了更不明確的規則是無關緊要的。

 

解決方案

方案（清潔方案）

解決日期

2009.07.30 17:40:04 星期四

修復版本

所有受影響的版本

描述

我唯一知道的解決方案就是刪除引起該bug的罪魁禍首。看看下面修復後的例子：

因為此bug的特性，演示放在一個 單獨的頁面：

HTML Code

CSS Code

這裡沒有修改任何內容，除了我刪除了規則上的!important字尾 ~ 現在所有元素都出現在IE8上了。既然p:first-line{} 的明確性比p{}高，我們不需要任何多餘的把戲去讓:first-line偽元素內部的規則生效。如果你的情況更特殊，應儘量通過其他手段讓:first-line{}規則集更具體一點。

相關文章