如何让 IE8 接受 CSS :before 标签？
Posted
技术标签:
【中文标题】如何让 IE8 接受 CSS :before 标签？【英文标题】：How can I get IE8 to accept a CSS :before tag? 【发布时间】：2011-02-02 12:38:08 【问题描述】：我有以下 CSS 代码
.editable:before
content: url(../images/icons/icon1.png);
padding-right:5px;
这与以下标记结合使用：
<span class="editable"></span>
在世界上所有其他有福的浏览器中，我的图标都出现了，但 IE8 似乎有这个问题。 :before 不是 CSS2 伪元素吗？ content: 不也是 CSS2 命令吗？什么给了？
【问题讨论】：
我不了解 IE8，但是 :before 和 :after 在 IE7 及以下版本中不支持。不知道他们是否最终在 8 中添加了支持。如果他们确实确保页面没有在 IE7 仿真中呈现。 【参考方案1】：更新：我误读了页面！ IE 8 确实支持：之前有图片，只是在 IE7 兼容模式下不支持。
IE8 支持:before，但不支持，并且在不处于兼容模式时也支持图像作为内容。感谢@toscho 的测试！
Source
Detailed comparison of which browsers can deal with what sort of content
我多么喜欢 quirksmode.org，这使得处理这些东西至少可以忍受一半。这家伙应该获得奖牌！
【讨论】：
啊，如果我没记错的话，你也不能把html代码放进去，所以用您可以将图像用作生成内容的背景：
<!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.
【讨论】：
你是对的！ IE8 作为 IE8 支持图像作为内容。干杯，更新了我的答案。 +1。【参考方案3】：其实你应该在这里小心并阅读详细信息。有关完整详细信息，请参阅this link - 其中指出
在 Windows Internet Explorer 8 以及更高版本的 Windows 中 IE8 标准模式下的 Internet Explorer，只有一个冒号形式 这个伪元素被识别——即:before。以。。。开始 Windows Internet Explorer 9，::before 伪元素需要两个 冒号，尽管单冒号形式仍然被识别并表现 与双冒号形式相同。
对于浏览器的含义 <IE9 - 您必须使用 :before 和对于 >=IE9 - 您必须使用 ::before
【讨论】：
看到这为我节省了很多时间，IE8 不适合我，因为我有 :: 双冒号是我的问题，感谢您的提醒。如何使这种向前兼容？ IE。如果小于 IEX 则使用单冒号，如果大于 IEY 则使用双冒号？ @Jacques 单冒号在 IE>=9 中也能正常工作。所以现在只要坚持使用单冒号（这是 CSS2.1 标准）。只有 CSS3 区分伪选择器和伪元素的单冒号和双冒号。【参考方案4】：使用 :before 和 :after 时，请注意不要使用双冒号（::after - 无效，但 :after 有效）。我为此损失了大约 20 分钟...
【讨论】：
谢谢，这实际上是我个人一直在寻找的答案。 IE8 现在对我来说是一个工作。 （愚蠢的 IE8！） 您先生，将我从可能长达一天的调试会话中拯救出来，为什么这个 &$(*# 不起作用，而每个兼容性表都说它应该起作用。 但最好在现代浏览器中使用 ::before 不确定是否可以像 close:before、close::beforeetc... 【参考方案5】：这与 Pekka 的真棒示例不同... 我在我的项目中的高度是高的...所以我添加了一个 padding-bottom: 0px;
以防万一你下雨了......
.icon-spinner:before
content: '';
padding: 15px;
padding-bottom: 0px;
background: url("css.png") no-repeat left top;
【讨论】：
以上是关于如何让 IE8 接受 CSS :before 标签？的主要内容，如果未能解决你的问题，请参考以下文章
如何让 MS Outlook 接受 CSS 样式 display:block？
可以使用带有 CSS ::after 和 ::before 标签的媒体查询吗？