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 便會完全看不見任何一字。