CSS Content属性在MSIE中不起作用？

Question

此处（已删除链接）我正在尝试使用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;
}

这是MSIE 11和Chrome 32的最终结果

为什么MSIE中的图像不显示？我也对modern.ie进行了测试。

Answer 1

这不起作用的原因是因为css content适用于:after和:before等pseduo元素

Answer 2

我同意GCYrillus，我也认为这是不好的做法，并且可能无法在所有浏览器中使用（如您的帖子所示）。如果要根据类控制图片，请尝试添加背景图片而不是内容属性。

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

Answer 3

根据MDN，

  

内容CSS属性与:: before和:: after一起使用   用于在元素中生成内容的伪元素。

在您的情况下，这不适用，因此它确实不适用于任何浏览器（Chrome似乎允许它，即使它不符合规格）

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/content

Answer 4

根据the CSS specification：

  

适用于：：之前和之后：伪元素

通过直接在元素而不是:before或:after伪元素上允许此属性，Chrome看起来违反了规范。为了与其他浏览器兼容，我建议您尝试使用其他方法，例如使用<img>元素或background-image CSS属性。