如何让 IE8 接受 CSS :before 标签？答案

【问题标题】：How can I get IE8 to accept a CSS :before tag?如何让 IE8 接受 CSS :before 标签？
【发布时间】：2011-02-02 12:38:08
【问题描述】：

我有以下 CSS 代码

.editable:before {
    content: url(../images/icons/icon1.png);
    padding-right:5px;
}

这与以下标记结合使用：

<span class="editable"></span>

在世界上所有其他有福的浏览器中，我的图标都出现了，但 IE8 似乎有这个问题。 :before 不是 CSS2 伪元素吗？ content: 不也是 CSS2 命令吗？什么给了？

【问题讨论】：

我不了解 IE8，但是 :before 和 :after 在 IE7 及以下版本中不支持。不知道他们是否最终在 8 中添加了支持。如果他们确实确保页面没有在 IE7 仿真中呈现。

标签： css internet-explorer-8 pseudo-element css-content

【解决方案1】：

更新：我误读了页面！ IE 8 确实支持：之前有图片，只是在 IE7 兼容模式下不支持。

IE8 支持:before，~~但不支持~~，并且在不处于兼容模式时也支持图像作为内容。感谢@toscho 的测试！

我多么喜欢 quirksmode.org，这使得处理这些东西至少可以忍受一半。这家伙应该获得奖牌！

【讨论】：

啊，如果我没记错的话，你也不能把html代码放进去，所以用就不行了……
@SLC：它被渲染为文本，是的。

【解决方案2】：

您可以将图像用作生成内容的背景：

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
    {
        content:    '';
        padding:    20px;
        background: url("css.png") center center no-repeat;
    }
</style>
<p>Test</p>

适用于 IE 8、Opera 和 Mozilla。 Live-Demo.

【讨论】：

你是对的！ IE8 作为 IE8 支持图像作为内容。干杯，更新了我的答案。 +1。

【解决方案3】：

其实你应该在这里小心并阅读详细信息。有关完整详细信息，请参阅this link - 其中指出

在 Windows Internet Explorer 8 以及更高版本的 Windows 中 IE8 标准模式下的 Internet Explorer，只有一个冒号形式这个伪元素被识别——即:before。以。。。开始 Windows Internet Explorer 9，::before 伪元素需要两个冒号，尽管单冒号形式仍然被识别并表现与双冒号形式相同。

对于浏览器的含义 <IE9 - 您必须使用 :before 和对于 >=IE9 - 您必须使用 ::before

【讨论】：

看到这为我节省了很多时间，IE8 不适合我，因为我有 ::
双冒号是我的问题，感谢您的提醒。如何使这种向前兼容？ IE。如果小于 IEX 则使用单冒号，如果大于 IEY 则使用双冒号？
@Jacques 单冒号在 IE>=9 中也能正常工作。所以现在只要坚持使用单冒号（这是 CSS2.1 标准）。只有 CSS3 区分伪选择器和伪元素的单冒号和双冒号。

【解决方案4】：

使用 :before 和 :after 时，请注意不要使用双冒号（::after - 无效，但 :after 有效）。我为此损失了大约 20 分钟...

【讨论】：

谢谢，这实际上是我个人一直在寻找的答案。 IE8 现在对我来说是一个工作。（愚蠢的 IE8！）
您先生，将我从可能长达一天的调试会话中拯救出来，为什么这个 &$(*# 不起作用，而每个兼容性表都说它应该起作用。
但最好在现代浏览器中使用 ::before 不确定是否可以像 close:before、close::before{etc...

【解决方案5】：

这与 Pekka 的真棒示例不同... 我在我的项目中的高度是高的...所以我添加了一个 padding-bottom: 0px;

以防万一你下雨了......

.icon-spinner:before {
    content: '';
    padding: 15px;
    padding-bottom: 0px;
    background: url("css.png") no-repeat left top;
}

【讨论】：