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不顯示：僞元素後

回答

相關問題