關於 ':before' 和 ':after' 僞元素

標準參考

關於 ':before' 和 ':after' 僞元素

':before' 和 ':after' 僞元素用來在一個元素的內容以前或以後插入生成的內容。

關於 ‘:before’ 和 ‘:after’ 僞元素的詳細信息，請參考 CSS2.1 規範 5.12.3 The :before and :after pseudo-elements 和 12.1 The :before and :after pseudo-elements 中的內容。

問題描述

CSS 2.1 規範中描述的 ':before' 和 ':after' 僞元素，在 CSS 1 歷史規範中均無規定，這致使早期版本的瀏覽器，如：IE6 IE7 IE8(Q) 不支持他們。

形成的影響

使用了 ':before' 和 ':after' 僞元素，可能會使頁面在 IE6 IE7 IE8(Q) 中的效果不盡人意。

受影響的瀏覽器

IE6 IE7 IE8(Q)

問題分析

對於此問題，咱們經過如下的測試用例來講明。

分析如下代碼：

<style type="text/css">
  p:before {
    content: "before";
  }
  p:after {
    content: "after";
  }
</style>
<p> Aloha! </p>

• 在 P 元素中 "Aloha！" 的前面和後面都用僞類添加了新的文本。

根據 CSS2.1 規範中的描述可知，最終頁面上顯示的文本應該是 'before Aloha! after'。

這段代碼在不一樣的瀏覽器環境中的表現：

IE6 IE7 IE8(Q)	IE8(S) Firefox Opera Safari Chrome

因此對於 ':before' 和 ':after' 僞元素的支持狀況，以下表：

IE6	IE7	IE8(Q)	IE8(S)	Firefox	Safari	Opera	Chrome
N	N	N	Y	Y	Y	Y	Y

【注】：實際中其餘除經常使用 HTML 標記一樣適用於次例，並不是僅 P 標記自身不支持。

解決方案

使用 JavaScript 或 jQuery 的 Pseudo Plugin 插件來模擬 ':before' 及 ':after' 僞元素的效果。

• 使用 JavaScript 判斷 IE6 IE7 IE8(Q) 並在其中經過腳本實現 ':before' 及 ':after' 僞元素的效果；
• 使用 jQuery 的插件 Pseudo Plugin，該組件利用 IE 特有的 CSS 行爲（behavior）及 CSS 表達式來模擬 ':before' 及 ':after' 僞元素的效果。