我怎样才能让IE8接受CSS：在标签之前？

I have the following CSS code

我有以下CSS代码

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

this is used in conjunction with the following markup:

这与以下标记结合使用:

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

In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives?

在世界上所有其他有福的浏览器中,我的图标出现了,但IE8似乎有问题。是不是:之前的伪元素CSS2?不满足:也是一个CSS2命令?是什么赋予了?

5 个解决方案

#1

Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode.

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

IE8 supports :before, ~~but not~~ and also images as content when not in compatibility mode. Kudos to @toscho for testing!

IE8支持:在不兼容模式下之前,但不支持和也作为内容的图像。感谢@toscho进行测试!

Source
Detailed comparison of which browsers can deal with what sort of content

详细比较哪些浏览器可以处理哪种内容

How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!

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

#2

Actually you should be careful here and read the detail. For full details, see this link - which states

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

In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before. Beginning with Windows Internet Explorer 9, the ::before pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form.

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

Meaning for browsers <IE9 - you must use :before and for >=IE9 - you must use ::before

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

#3

When using :before and :after, just be careful not to use double colons (::after - will not work, but :after will work). I lost about 20mins for this...

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

#4

You may use the image as background for the generated content:

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

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

Works in IE 8, Opera and Mozilla. Live-Demo.

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

#5

This is going off of Pekka's awesome example... My heights on my project was to tall for the row... So I added a padding-bottom: 0px;

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

Just in case you rain into this....

万一你下雨了....

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

#1