z-index IE8在生成的内容上的错误：after [英] z-index IE8 bug on generated content with :after

问题描述

这是IE8中的已知错误，请查看此处的最后一个错误：

http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

现在，通过一个简单的例子，我发现了一点（使用IE8测试）：

http://jsfiddle.net/AjCPM/

 < div id =target> 
< div> div< / div> 
< / div> 
 
 
 #target {
 location：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;左：10％; width：100％;高度：100％;背景：青色; 
 content：after; 
 position：absolute; 
 z-index：10; 
} 
  

IE8在红色矩形下方呈现青色矩形当它具有较低的z-index时。

现在是棘手的部分：

将#target> div的z-index从0到-1和voilá！它解决了！

所以我现在使用很多z-index解决了我的问题：-1;

但是我不'这感觉安全。

$ b

您知道更好的解决方案吗？ after伪元素，因为我有一个产品列表，我想添加一个图像到该项目，当它有类'sold'例如。

我可以在服务器或JS创建一个新的html元素，但我认为使用：after是正确的语义解决方案。

问题是，我有点偏执：现在伪元素后，你认为更好避免它？

解决方案

无需设置 z-index c：之前使用： 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添加图像。

This is a known error in IE8, look at the last bug here:
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

Now, playing a bit with a simple example I found this (test it using 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 renders the cyan rectangle (the :after) below the red rectangle, even when it has lower z-index.
And now the tricky part:
change the z-index for #target>div from 0 to -1 and voilá ! it's solved !

So I solved my problem now using a lot of z-index: -1;
But I don't feel safe with this.

Do you know a better solution?

I'm using the :after pseudoelement because I have a list of products, and I want to add an image to the the item when it has the class 'sold' for example.
I can create in the server or with JS a new html element for that, but I think using :after is the correct semantic solution.
The problem is that I'm a bit paranoid about the :after pseudoelement now, do you think is better to avoid it?

解决方案

No need to set z-indexes, just make sure you use :after instead of :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;
}​

Since the generated content comes after #target, it will naturally be stacked above.

BTW Whether a product is "sold" or not is semantic information, and so the correct semantic solution would be to include it in the HTML, rather than adding the image through CSS.

这篇关于z-index IE8在生成的内容上的错误：after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！