CSS 选择器之前和之后的 IE8 z-index

发布于 2024-10-29 13:11:55 字数 1504 浏览 4 评论 0 原文

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

<div id="target">
    <p>Text to appear in front</p>
</div>

#target {
    position: relative;
    background: red;
    width: 200px;
    height: 200px;
    padding: 45px;
}

#target:before {
    content: "content from before, should be behind #target";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
    z-index: -1;
}

在每个浏览器上都能很好地工作，除了 IE8...

它应该显示如下：

但在 IE8 中你会得到这个:'(

那么问题来了，如何让它在 IE8 中正常工作呢？

中提供答案作为实际工作示例

请在 jsfiddle... 该用户也有完全相同的问题。他没有得到任何答案，但这个显然没有得到答案不起作用，因此我请求在 jsfiddle 上演示它的工作示例

原文

This is very frustrating....

http://jsfiddle.net/RRnm8/

<div id="target">
    <p>Text to appear in front</p>
</div>

#target {
    position: relative;
    background: red;
    width: 200px;
    height: 200px;
    padding: 45px;
}

#target:before {
    content: "content from before, should be behind #target";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
    z-index: -1;
}

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 user 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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

听不够的曲调 2024-11-05 13:11:55

此问题似乎与 IE 处理 z-index 堆栈的方式有关。 FF 和 Chrome 在整个文档范围内使用 z-index 处理元素，而在 IE 中，您可能知道，z-index 首先基于父级的 z-index。

我认为 :before 内容使这个问题变得复杂，尽管它的 z 索引为负，但它是否在父元素内。与它的索引进行比较的元素不是父 div（如 FF 或 Chrome 中那样），而是 div 内的内容，即 p 元素。 p 元素不是一个块，并且也共享父 div 的 z-index，因此它不能位于 :before 内容下方。

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

请参阅：http://jsfiddle.net/RRnm8/3/