11

我有以下 CSS 代码

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

这与以下标记结合使用：

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

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

4

5 回答 5

24

实际上，您应该在这里小心并阅读详细信息。有关完整的详细信息，请参阅此链接- 其中指出

在 Windows Internet Explorer 8 以及更高版本的 IE8 标准模式下的 Windows Internet Explorer 中，只能识别此伪元素的单冒号形式，即 :before。从 Windows Internet Explorer 9 开始，::before 伪元素需要两个冒号，尽管仍然可以识别一个冒号的形式并且其行为与两个冒号的形式相同。

对浏览器的意义<IE9——你必须使用:before，对于>=IE9——你必须使用::before

于 2012-04-17T13:36:42.467 回答
23

更新：我看错了页面！IE 8确实支持 :before 与图像，它只是在 IE7 兼容模式下不支持。

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

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

于 2010-03-30T15:05:52.983 回答
10

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

于 2012-10-15T12:26:17.600 回答
6

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

<!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。现场演示。

于 2010-03-30T15:34:41.360 回答
0

这与 Pekka 的绝妙示例不同……我的项目中的高度对于该行来说是很高的……所以我添加了一个 padding-bottom: 0px;

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

.icon-spinner:before {
    content: '';
    padding: 15px;
    padding-bottom: 0px;
    background: url("css.png") no-repeat left top;
}
于 2013-09-30T15:51:04.980 回答