上的IE10僞元素與負面定位不起作用

我試圖負和:after僞元素<hr>，但IE10是固執的，只是沒有顯示這些元素。上的IE10僞元素與負面定位不起作用

這裏是我的例子：http://jsfiddle.net/Shpigford/HyVMR/

這似乎在除了IE10所有瀏覽器正常工作。它不顯示左側和右側的塊。

它正常工作與<div>，但使用<hr>導致左僞元素都

CSS不露面：

hr { 
    background:red; 
    margin:0 150px; 
    height:50px; 
    position:relative; 
} 
hr:before { 
    content: ''; 
    position:absolute; 
    height:50px; 
    left:-150px; 
    width:150px; 
    background:green; 
} 
hr:after { 
    content: ''; 
    position:absolute; 
    height:50px; 
    right:-150px; 
    width:150px; 
    background:blue; 
}

來源

2012-06-21 Shpigford

你不應該是能夠做到這一點 - 我敢說IE10正在這裏符合標準，並且所有其他瀏覽器都違反了規範。 – BoltClock

規範對此有何具體說明？ – Shpigford

在空元素上使用'：before'和'：after'是熱門話題，但[spec]（http://www.w3.org/TR/CSS21/generate.html#before-after-content ）似乎禁止它......作爲void元素的'hr'不能有文檔樹內容，所以瀏覽器無論如何插入生成的內容似乎都是不正確的。衆所周知，即使對於表單元素等內容，只能在某些瀏覽器中，而不能在其他瀏覽器中插入'：before'和'：after'內容。 – BoltClock

嘗試溢出：可見;上<hr>

hr { 
background:red; 
margin:0 150px; 
height:50px; 
position:relative; 
overflow:visible;

}

來源

2012-06-22 10:27:19 Makc

謝謝。這也有助於解決我對此問題的看法。簡短而甜美。 – lislis

上的IE10僞元素與負面定位不起作用

回答

相關問題