打印

RS8010: IE6 IE7 IE8(Q) 不支持 ':before' 和 ':after' 伪元素

作者:武利剑

标准参考

关于 ':before' 和 ':after' 伪元素

':before' 和 ':after' 伪元素用来在一个元素的内容之前或之后插入生成的内容。

关于 ‘:before’ 和 ‘:after’ 伪元素的详细信息,请参考 CSS2.1 规范 5.12.3 The :before and :after pseudo-elements12.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' 伪元素的效果。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.3
Chrome 6.0.437.3 dev
Safari 5.0
Opera 10.54
测试页面: before_after_pseudo-class.html
本文更新时间: 2010-07-08

关键字

before after Pseudo element