生成内容的z-index IE8错误:after

Question

这是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;
}

IE8渲染红色矩形下方的青色矩形(:after),即使它具有较低的z-index.
现在是棘手的部分:
将#target> div的z-index从0更改为-1并且voilá!它解决了!

所以我现在使用大量的z-index解决了我的问题:-1;
但我对此感到不安全.

你知道更好的解决方案吗？

我正在使用:在伪元素之后,因为我有一个产品列表,并且我想在项目具有"已售出"类时添加图像.
我可以在服务器或JS中创建一个新的html元素,但我认为使用:after是正确的语义解决方案.
问题是我有点偏执:现在伪元素之后,你认为最好避免它吗？

Answer 1

我使用不同的方法来解决这个问题：

每个产品的 HTML 都包含一个“已售完”横幅，可以放置在主图像上。默认情况下，CSS 隐藏此元素。如果包装“产品”DIV 包含“soldOut”类，CSS 将覆盖默认声明并显示横幅。

<div class="product soldOut">                                   
    ... product html ...
    <div class="soldOutBanner"></div>    
</div>

CSS：

.soldOutBanner {
     display:none
}

.soldOut .soldOutBanner {
    display:block; 
    width:133px;
    height:130px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:10;
    background-image:url(../SoldOut.png);
}