IE CSS Bug系列：IE6 :first-letter中樣式被忽略

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

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

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

受此bug影響的瀏覽器版本

IE6

表現

整個:first-letter規則集被忽略

教程日期

2009.07.28 09:36:43 星期二

描述

這是一個比較少見的bug，產生的原因挺有意思的，我們從一個演示來看看這個問題：

演示

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

HTML Code

CSS Code

在功能完善的那些瀏覽器上一切正常，但是IE6貌似完全忽略了:first-letter偽元素，似乎它不支援該元素似的。

眼尖的同學也許注意到了我的選擇器中的h2，並且會懷疑我是否在寫這段程式碼前耍了什麼花招。好吧，不是你們想的那樣，其實只要在:first-letter的後面加入h2或其它任何選擇符並用逗號分開，都會導致IE6忽略:first-letter。你能馬上想到解決方案嗎？:)

 

解決方案

以下是針對bug的解決方案

方案（清潔方案）

解決日期

2009.07.28 09:41:51 星期二

修復版本

所有受影響的版本

描述

這不是第一次我宣稱解決方案超級簡單了，不過我覺得這個bug確實容易解決。讓我們來看看修正後的演示並嘗試發現其中的變化：

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

HTML Code

CSS Code：

現在一切正常美觀了。為了修復這個問題我到底做了什麼呢？我只是將:first-letter這個偽元素選擇器移到了最後面（即這個選擇器後面沒有逗號和其他的選擇器）。是的，實際上就是這麼簡單。