如何让IE8接受CSS:标签之前?

Wil*_*eja 11 css internet-explorer-8 pseudo-element css-content

我有以下CSS代码

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

这与以下标记结合使用:

<span class="editable"></span>
Run Code Online (Sandbox Code Playgroud)

在世界上所有其他有福的浏览器中,我的图标出现了,但IE8似乎有问题.是不是:before伪元素CSS2?还不content:是CSS2命令?是什么赋予了?

Tim*_*Tim 24

其实你在这里应该小心并阅读细节.有关详细信息,请参阅此链接 - 指出哪些状态

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

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

  • @Jacques单个冒号在IE> = 9时也能正常工作.所以现在只需坚持使用单个冒号(这是CSS2.1标准).只有CSS3区分伪选择器和伪元素的单冒号和双冒号. (3认同)

Pek*_*ica 23

更新:我误读了页面!IE 8 确实支持:在使用图像之前,它只是在IE7兼容模式下支持.

IE8 在不兼容模式下支持:before(但不支持)图像作为内容.感谢@toscho的测试!

我多么喜欢quirksmode.org,这使得处理这些东西至少可以中途忍受.这家伙值得一枚奖牌!


mar*_*bgd 10

当使用:before和:after时,注意不要使用双冒号(:: after - 将无效,但是:after将起作用).我为此失去了大约20分钟......


fux*_*xia 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>
Run Code Online (Sandbox Code Playgroud)

适用于IE 8,Opera和Mozilla.现场演示.