Question

我有以下CSS代码

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

这与以下标记结合使用：

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

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

Answer 1

实际上你应该在这里小心并阅读细节。有关详细信息，请参阅this link - 哪些州

在Windows Internet Explorer 8以及更高版本的Windows中 Internet Explorer在IE8标准模式下，只有单冒号形式这个伪元素被识别出来 - 也就是说：之前。以。。。开始 Windows Internet Explorer 9，:: before伪元素需要两个冒号，虽然单结肠形式仍然被识别和行为与双冒号相同。

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

Answer 2

更新：我误读了页面！ IE 8 支持：在使用图像之前，它在IE7兼容模式下不会。

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

我如何喜欢quirksmode.org，这使得处理这些东西至少可以中途忍受。这个家伙值得一枚奖牌！

Answer 3

当使用：before和：after时，请注意不要使用双冒号（:: after - 将无效，但是：after将起作用）。我为此失去了大约20分钟......

Answer 4

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

<!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

Answer 5

这是Pekka的一个很棒的例子...... 我的项目的高度是为了排高......所以我添加了一个填充底部：0px;

万一你下雨了......

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

如何让IE8接受CSS：标签之前？

5 个答案: