<hr />上的IE10伪元素，负定位不起作用

Question

我试图在:before上对:after和<hr>伪元素进行否定定位，但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;
}

Answer 1

在<hr>

上尝试溢出：可见;

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

}