IE8 z-index在css选择器之前和之后 [英] IE8 z-index on before and after css selectors

问题描述

这是非常令人沮丧的....

...的工作示例

这个好友有完全相同的问题他没有回答，但这明显不起作用，因此我要求一个工作示例在 jsfiddle

提前感谢：）

解决方案

这个问题似乎与IE如何处理z-index堆栈有关。其中FF和Chrome处理的文档范围为z-index的元素，在IE中，你可能知道，z-index首先基于父的z-index。

我认为：之前的内容使这个问题复杂化，尽管它有一个负z-index，是在父元素内。正在与其比较的索引的元素不是父div，因为它将在FF或Chrome中，但是div中的内容， p 元素。 p 元素不是一个块，并且也共享父div的z-index，因此它不能低于：before内容。

解决方案是创建一个内部div，或者给予 p 元素相对定位和样式。

查看： http://jsfiddle.net/RRnm8/3/

This is very frustrating....

http://jsfiddle.net/RRnm8/

works well on every browser, except for IE8...

it should be displayed like this:

But in IE8 you get this :'(

So the question would be how to get this to work properly in IE8?

Please provide the answer as a real working example at jsfiddle...

This buddy has the exact same problem. He got no answer but this which clearly doesn't work, hence my kind request for a working example demonstrating it on jsfiddle

Thanks in advance :)

解决方案

This issue appears to be related to how IE handles the z-index stack. Where FF and Chrome treats elements with z-index document-wide, in IE, as you likely know, z-index is based upon the parent's z-index first.

I think the :before content complicates this issue and, despite it having a negative z-index, is it within the parent element. The element its index is being compared with is not the parent div, as it would be in FF or Chrome, but the content inside the div, the p element. The p element is not a block and shares the z-index of the parent div as well, so it cannot be below the :before content.

The solution is to make an inner div, or give the p element relative positioning and styling.

See: http://jsfiddle.net/RRnm8/3/

这篇关于IE8 z-index在css选择器之前和之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！