Html CSS内容属性没有'；你不在MSIE工作吗？

在这里（链接已删除），我尝试使用CSS内容属性将锚中的文本替换为图像。我猜Chrome做我希望它做的事情是不规则的行为，用CSS代码中提供的图像替换文本

以下是我使用的代码：

<!-- HTML -->
<a href="http://www.pegi.info/en/index/global_id/505/?searchString=Assassin%E2%80%99s+Creed%C2%AE+III&submit=Search#searchresults" class="pegi18">PEGI Rating</a> 

<!-- CSS -->
.pegi18 {
content: url("http://example.com/path/path/path/18.png");
width: 50px;
height: 61px;
}

.pegi18{
内容：url（“http://example.com/path/path/path/18.png");
宽度：50px；
高度：61px；
}

以下是MSIE 11和Chrome 32的最终结果

---

为什么图像不能在MSIE中显示？我还做了一些现代的测试，比如说，

这不起作用的原因是css

内容

是为psedoo元素准备的，比如

：after

和

：before

这不起作用的原因是css

内容

是为psedoo元素准备的，比如

：after

和

：在
之前，根据：

适用于：：before和：after伪元素

Chrome允许直接在元素上使用此属性，而不是在
：before
或
：after
伪元素上使用此属性，这似乎违反了规范。为了与其他浏览器兼容，我建议尝试另一种方法，例如使用
元素或
背景图像
CSS属性。
根据：

适用于：：before和：after伪元素

Chrome允许直接在元素上使用此属性，而不是在
：before
或
：after
伪元素上使用此属性，这似乎违反了规范。为了与其他浏览器兼容，我建议尝试另一种方法，例如使用
元素或
背景图像
CSS属性。
我同意GCYrillus，我也认为这是一种不好的做法，可能不适用于所有浏览器（如您的帖子所示）。如果要基于类控制图片，请尝试添加背景图片而不是内容属性

.pegi18 {
background: url("http://daylostar.com/img/gwt/pegi/18.png");
width: 50px;
height: 61px;
}

我同意GCYrillus，我也认为这是一种不好的做法，可能无法在所有浏览器中使用（正如你的帖子所建议的）。如果要基于类控制图片，请尝试添加背景图片而不是内容属性

.pegi18 {
background: url("http://daylostar.com/img/gwt/pegi/18.png");
width: 50px;
height: 61px;
}

据MDN称

content CSS属性与：：before和：：after一起使用
伪元素生成元素中的内容

在您的情况下，这不适用，因此它确实不应该在任何浏览器中工作（Chrome似乎允许它，尽管它不符合规格）

参考：
根据MDN

content CSS属性与：：before和：：after一起使用
伪元素生成元素中的内容

在您的情况下，这不适用，因此它确实不应该在任何浏览器中工作（Chrome似乎允许它，尽管它不符合规格）

参考：
所有版本的IE？请具体一点。我在FF中尝试了你的网站，在那里也不起作用。这是一个特定于Chrome的设置吗？以这种方式替换内容是一种不好的做法。在我看来，Chrome从一开始就有这种行为。内容只能与伪元素一起使用…@Diodeus所有版本，如在modern.ie、WinXP、7和8.1上测试的那样。@Charlie74我没有FF来测试它，但这让我想到了同样的问题。ie的所有版本？请具体一点。我在FF中尝试了你的网站，在那里也不起作用。这是一个特定于Chrome的设置吗？以这种方式替换内容是一种不好的做法。在我看来，Chrome从一开始就有这种行为。内容只能与伪元素一起使用…@Diodeus所有版本，在modern.ie、WinXP、7和8.1上测试过。@Charlie74我没有FF来测试它，但这让我也这么想。谢谢你也提供了一个解决方案。我已经考虑过了，但我把它当作了一个快速解决方案。谢谢你也提供了一个解决方案。我已经考虑过了，但我用它作为一个快速解决方案。