IE 7 下慎用 :first-letter 偽元素

睡蓮 標籤
ie7

　　不久前在XOOPS正體中文站替一位網友解決 IE 8下佈景問題時，發現用 IE 7 及 6 版本進入網站，CPU 會飈高，持續載入中的空白畫面久久沒有回應，被逼要中止程式，而 IE 8 及其他瀏覽器則無此問題。( 補註：更正為只有 IE 7版本，IE 6 的於後來經再測試後確定無問題。)

　　是什麼原因導致 CPU 飈高？這是繼上次替網友測試某專業佈景網站提供的佈景而發現<title>排序問題後的另一個挑戰自己的難題 ...

　　在我的認知裡，會因佈景問題造成 CPU 飈高的，大多出在 javascript 上，但在網友提供的佈景裡，除了引用一條 js 檔不存在的死連結外，根本就沒有用到任何 javascript。眼看 theme.html 內容比官方的內建佈景還要簡單不過，於是就出動最常用於查找錯誤的註解法，鎖定 theme.html 中的某一行結構，循著語法中的 id，最終在 CSS 裡抓出元凶了。

　　過去見過的 CSS bug，不外乎都是內容顯示不正常，會造成 CPU 飈高失去回應的倒是首見。對於以手工編寫代碼為樂、喜歡研究代碼的我，更是挑起了興趣，打開 notepad++ 測將起來。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW">
<head>            
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CSS偽元素bug</title>
<style type="text/css">
 /*<![CDATA[*/
#bug {  position:absolute; }
h1:first-letter {color:#f00;}
em {color:#38bd00; background:#efefef; }
/*]]>*/
</style>
</head>
<body>
<h1 id="bug"><em>CSS偽元素bug</em></h1>
</body>
</html>

　　上例代碼中橘色地方是 CSS 偽元素，而綠色就是關鍵地方，當 :first-letter 遇上 ID 或 Class 選擇器、絕對定位、及父元素下的內聯元素 + background 這些組合，則 CPU 飈高條件成立。

　　IE 7 瀏覽器下點一下“Result”觀看結果：

1) ID 或 Class 選擇器：

　　如將原來的 #bug 選擇器換成類型選擇器或屬性選擇器，則將失去效用，使 IE 7 下的 CPU 正常：

2) 絕對定位 ( position:absolute )：

　　若將原來的絕對定位換成相對定位或是拿掉不用，也將失去效用，使 IE 7 下的 CPU 正常：

3) 父元素下的內聯元素 + background ：

　　內聯元素必須是像下面父元素之下所有文字全包圍起來才符合條件

<h1 id="bug"><em>CSS偽元素bug</em></h1>

　　若是從文字中插入如下僅包圍 “bug” 字地方，便會失去效用：

　　除此之外，將內聯元素改為區塊元素或拿掉 background，也同樣會使 CPU 正常，但是 :first-letter 偽元素會因內聯元素變成區塊元素而失去效果，而拿掉 background 便會完全看不見任何一字。