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渲染红色矩形下方的青色矩形（后面），即使它具有较低的z-index。
现在是棘手的部分：
将#target＆gt; div的z-index从0更改为-1并vo！它已经解决了！

所以我现在使用很多z-index解决了我的问题：-1;
但我对此感到不安全。

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

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

Answer 1

要首先回答您的上一个问题，只要您不需要支持任何完全不支持生成内容（http://caniuse.com/#feat=css-gencontent）的浏览器，那么您就不需要避免它。但是，由于您注意到这是一个已知错误，因此您应该小心。

在这个具体的例子中，我可以想到三种不同的方法来解决这个bug。这些对您有用取决于您的实际使用情况。

使用:after代替:before并移除孩子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;
}

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

Answer 2

无需设置z-index es，只需确保使用:after代替:before（demo）：

#target {
    position: relative;
    width: 200px;
    height: 200px;
}
#target>div{
    background: red;
    width: 200px;
    height: 200px;
}
#target:after {
    content: "after";
    position: absolute;
    top: 0;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
}

由于生成的内容位于#target之后，因此它自然会叠加在上面。

BTW产品是否“出售”是语义信息，因此正确的语义解决方案是将其包含在HTML中，而不是通过CSS添加图像。

Answer 3

关于：IE8中选择器之前和之后的快速说明：要使它们工作，您需要声明DOCTYPE。见this W3Schools page。我猜你已经做过了。

如果你还没有（我认为你可能有），请参阅答案to this question。

基本上，底线是它是一个错误。使用z-index -1的解决方案不是理想，但是再次解决这个问题并不理想。我不认为使用-1的z-index是过分关注的问题，除非它在你的布局中引起问题。如果您非常担心，那么为什么不仅仅针对修复的IE8。例如，您可以使用条件注释，如下所示：

<!--[if IE 8]>
<style>
#target>div{
  z-index:-1;
}
</style>
<![endif]-->

您遇到的行为是许多开发人员鄙视IE的原因之一。在许多情况下，包括这一个，没有完美的解决方案。你可以：

停止使用:before和:after选择器＆amp;将您的HTML / CSS调整为适合IE8的内容。
使用条件注释或JavaScript发出专门针对IE8的修复
继续黑客攻击，并尝试找到另一个有效的HTML / CSS组合 - 但有可能它不会比你的负z-index解决方案更理想。

不幸的是，在很多情况下，没有“语义正确”的跨浏览器网站。

我的两分钱是创建一个IE8样式表，并使用上面显示的条件注释来加载样式表。在样式表中，使用您提出的z-index: -1解决方案。许多网站使用以IE为目标的样式表。

Answer 4

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

每个产品的HTML都包含一个“已售完”的横幅，可以放置在主图像上。默认情况下，CSS隐藏此元素。如果包装“product”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);
}

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

4 个答案: