如何让 IE8 接受 CSS :before 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2546251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get IE8 to accept a CSS :before tag?
提问by William Calleja
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 :beforepseudo-element CSS2? isn't content:also a CSS2 command? what gives?
在世界上所有其他受祝福的浏览器中，我的图标都出现了，但 IE8 似乎对此有问题。:before伪元素不是CSS2吗？不content:也是一个 CSS2 命令吗？是什么赋予了？
回答by Tim
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 :beforeand for >=IE9- you must use ::before
浏览器的含义<IE9- 您必须使用:before并且对于>=IE9- 您必须使用::before
回答by Pekka
Update: I misread the page! IE 8 doessupport :before with images, it just doesn't when it is in IE7 compatibility mode.
更新：我误读了页面！IE 8确实支持 :before 图像，但在 IE7 兼容模式下不支持。
IE8 supports :before, but notand also images as content when not in compatibility mode. Kudos to @toscho for testing!
IE8 支持:before，但不支持，并且在不兼容模式下也支持图像作为内容。感谢@toscho 进行测试！
How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!
我多么喜欢 quirksmode.org，这使得处理这些东西至少可以忍受一半。这家伙值得一枚奖牌！
回答by marinbgd
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 分钟...
回答by fuxia
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。现场演示。
回答by no1uknow
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 的一个很棒的例子......我在我的项目中的高度对于这一行来说太高了......所以我添加了一个 padding-bottom: 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;
}
