css – z-index IE8生成的内容bug：以后

这是IE8中已知的错误，请看这里的最后一个错误：
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;
}

基本上，当面对这样的浏览器之间的解释差异时，最好的方法是尝试重新排列您的方法来查找跨浏览器的工作。