不久前在正體中文站替一位網友解決 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++ 測將起來。
上例代碼中橘色是 CSS 偽元素，而綠色就是關鍵地方，當 :first-letter 遇上 ID 或 Class 選擇器、絕對定位、及母元素下的內聯元素 + background 這些組合，則 CPU 飈高條件成立。 ( 想試驗上例代碼的可以在 IE 7 下點按這裡打開實驗板，將上面代碼全複製進去觀看結果。
1) ID 或 Class 選擇器：
假若將此選擇器換成類型選擇器或屬性選擇器，則將失去效用，使 IE 7 下的 CPU 正常。( 實驗板 )
2) 絕對定位 ( position:absolute )：
若將絕對定位換成相對定位或是拿掉不用，也將失去效用，使 IE 7 下的 CPU 正常。( 實驗板 )
3) 母元素下的內聯元素 + background ：
內聯元素必須是像下面母元素之下所有文字全包圍起來才符合條件
若是從文字中插入如下黃色地方，便會失去效用。( 實驗板 )
除此之外，將內聯元素改為區塊元素或拿掉 background，也同樣會使 CPU 正常，但是 :first-letter 偽元素會因內聯元素變成區塊元素而失去效果，而拿掉 background 便會完全看不見任何一字。
是什麼原因導致 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 下點按這裡打開實驗板，將上面代碼全複製進去觀看結果。
1) ID 或 Class 選擇器：
假若將此選擇器換成類型選擇器或屬性選擇器，則將失去效用，使 IE 7 下的 CPU 正常。( 實驗板 )
<!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[*/ h1 { 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>
2) 絕對定位 ( position:absolute )：
若將絕對定位換成相對定位或是拿掉不用，也將失去效用，使 IE 7 下的 CPU 正常。( 實驗板 )
<!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:relative; } h1:first-letter {color:#f00;} em {color:#38bd00; background:#efefef;} /*]]>*/ </style> </head> <body> <h1 id="bug"><em>CSS偽元素bug</em></h1> </body> </html>
3) 母元素下的內聯元素 + background ：
內聯元素必須是像下面母元素之下所有文字全包圍起來才符合條件
<h1 id="bug"><em>CSS偽元素bug</em></h1>
若是從文字中插入如下黃色地方，便會失去效用。( 實驗板 )
<!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">CSS偽元素<em>bug</em></h1> </body> </html>
除此之外，將內聯元素改為區塊元素或拿掉 background，也同樣會使 CPU 正常，但是 :first-letter 偽元素會因內聯元素變成區塊元素而失去效果，而拿掉 background 便會完全看不見任何一字。