这是IE8中已知的错误，请看这里的最后一个错误：
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html
现在，用一个简单的例子来发现这个(使用IE8测试)：
http://jsfiddle.net/AjCPM/
<div id="target">
<div>div</div>
</div>
#target {
position: relative;
width: 200px;
height: 200px;
z-index: 1;
}
#target>div{
background: red; width: 200px; height: 200px;
position: relative;
z-index: 0;
}
#target:before {
top: 0; left: 10%; width: 100%; height: 100%; background: cyan;
content: "after";
position: absolute;
z-index: 10;
}
即使Z-index较低，IE8会将红色矩形下面的青色矩形(后面)呈现。
而现在的棘手部分是：
将#target> div的z-index从0更改为-1，然后更改！它已经解决了！
所以我现在使用很多z-index来解决我的问题：-1;
但我不觉得安全。
你知道一个更好的解决方案吗？
我使用的是：在伪元素之后，因为我有一个产品列表，我想在一个类“出售”的时候添加一个图像。
我可以在服务器或JS中创建一个新的html元素，但我认为使用：after是正确的语义解决方案。
问题是我有点偏执：在现在的虚拟现实之后，你认为最好避免吗？
解决方法
首先要回答你的最后一个问题，只要你不需要支持任何完全不支持生成内容的浏览器(
http://caniuse.com/#feat=css-gencontent)，那么你不应该避免它。但是，由于您注意到这是一个已知的错误，您应该小心。
在这个具体的例子中，我可以想到三种不同的方式解决这个bug。这些是否对您有用，取决于您的实际用例。
>使用：之后而不是：之前和删除定位从孩子div：http://jsfiddle.net/AjCPM/24/
#target {
position: relative;
width: 200px;
height: 200px;
z-index: 1;
}
#target>div{
background: red;
width: 200px;
height: 200px;
}
#target:after {
content: "after";
position: absolute;
top: 0;
left: 10%;
width: 100%;
height: 100%;
background: cyan;
z-index: 10;
}
>将后面添加到子div而不是父类：http://jsfiddle.net/AjCPM/26/
#target {
position: relative;
width: 200px;
height: 200px;
z-index: 1;
}
#target>div{
position: relative;
background: red;
width: 200px;
height: 200px;
z-index: 0;
}
#target>div:before{
content: "after";
position: absolute;
top: 0;
left: 10%;
width: 100%;
height: 100%;
background: cyan;
z-index: 10;
}
>使用包装元素(通常是因为您已经有一个)将基本样式应用于：http://jsfiddle.net/AjCPM/29/
<div id="target">
<div id="wrap">
<div>div</div>
</div>
</div>
#target {
position: relative;
width: 200px;
height: 200px;
z-index: 1;
}
#wrap>div{
position: relative;
background: red;
width: 200px;
height: 200px;
z-index: 0;
}
#wrap>div:before{
content: "after";
position: absolute;
top: 0;
left: 10%;
width: 100%;
height: 100%;
background: cyan;
z-index: 10;
}
