IE不显示：伪元素后

我使用伪元素设计<hr>元素，但Internet Explorer 11不支持它。IE不显示：伪元素后

这是应该的样子： http://oi57.tinypic.com/23rsio2.jpg

hr { 
    height:1px; 
    background-color:#D1D1D1; 
    border:0; margin:30px 90px; 
} 

hr:after { 
    background:url('../images/hr.png') no-repeat top center; 
    content:""; 
    display:block; 
    height:30px; 
    position:relative; 
    top:-15px; 
}

我希望有人能帮助我。在此先感谢！

来源

2014-07-11 Berry van der Velden

在声明'width'你'：after' –

你能做出的jsfiddle？ –

@ŠimeVidas如果你需要小提琴来回答这个问题，你应该考虑修改你的知识。 –

Psuedo-elements被处理为孩子它们所连接的元素所做的事情。

<hr> 
    <psuedo-element-after> image here </psuedo-element-after> 
</hr>

这是无效的，因为<hr />不允许儿童。因此，它不会工作。

考虑应用背景图像的<hr />本身，或者使用类似一个类来做到这一点，就像这样：<div class="divider"></div>

来源

2014-07-11 14:14:18

有趣。我不知道这是否基于浏览器，因为Chrome确实在hr标签上显示after伪元素，就像Firefox一样[看这里]（http://jsfiddle.net/aD47G/） – Alex

@Niet the Dark Absol so IE正确或Firefox错误地执行？ AS FF显示图像。检查FF http://jsbin.com/tivazafi/1/edit中的链接。 –

确实有趣，但与可能流行的观点相反，在这种情况下，Internet Explorer是*正确的*。 Chrome和Firefox *应该*拒绝呈现psuedoelement。 –

IE不显示：伪元素后

回答

相关问题