Position Absolute div inside position relative list item - 剪辑问题 - ie7

Question

我在 IE7 中遇到了一个奇怪的问题。

我在每个列表项中都有绝对 div。但是绝对 div 隐藏在 IE7 中的 div 内。最后一个 div 似乎没问题。

屏幕截图

JSFIDDLE：http://jsfiddle.net/surjithctly/dEBuC/

HTML

<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>

CSS

.container {
    width:900px;
    margin:0 auto;
}

.listitem {
    position:relative;
    background:#00CC00;
    border-bottom:1px solid #FFF;
    min-height:30px;
}

.layer {
    position:absolute;
    top:10px;
    right:10px;
    padding:10px;
    background:#993300;
    border:solid 1px #FFF;
    z-index:100;
    overflow:visible;
}

知道如何在 IE7 中解决此问题吗？

提前致谢。

Answer 1

添加包装元素

Updated Demo

如果可以选择编辑 HTML 源代码，请在侧面内容周围添加一个包装元素，并将其放在正文内容之前。然后将position:relative 添加到包装器元素，而不是将其添加到.listitem。这会将本地堆叠上下文（在 IE7 中不方便的时间创建）移动到不会造成伤害的元素。

HTML

<div class="container">
    <div class="listitem">
        <div class="wrapper">
            <div class="layer">I'm a layer</div>
        </div>
        Some long content here bla bla blaaaaaaa baaaaaaaaaaa
    </div>
    ....
</div>

CSS

.listitem {
    /* position: relative; */   /* Removed here */
    ....
}
.wrapper {
    position: relative;    /* Added here */
    height: 0;
}

jQuery

​​>

如果无法编辑 HTML 源代码，可以使用 jQuery 进行一些选择。

1. 采用@avrahamcool 提出的基本方法（将每个.listitem 的z-index 设置为一个逐渐减小的值）。这种方法的缺点是它颠倒了侧面元素相对于彼此的分层顺序，这可能是可接受的，也可能是不可接受的。

2. 使用 jQuery 编辑 HTML DOM，使 HTML 如上所示，同时使用相关的 CSS 更改。这种方法的缺点是内容的样式在 jQuery 代码运行之前不会正确呈现。因此，当页面首次加载时，内容可能会短暂出现损坏。

3. 将.container 设置为position:relative，而不是.listitem。使用jQuery计算每个.listitem元素在.container中的相对位置，并以此设置每个侧边元素的top位置。这种方法与解决方案 #2 有相同的缺点。

4. 在极端情况下，如果甚至无法编辑 JavaScript，您可以通过添加一系列越来越长的 CSS 选择器来模拟解决方案 #1，并且 z-index 值会递减（如下所示）。我不推荐这种方法，因为它非常不切实际，但它可以作为最后的手段。

CSS

.listitem {z-index:99;}
.listitem + .listitem {z-index:98;}
.listitem + .listitem + .listitem {z-index:97;}
...

结论

简而言之，当前的 HTML 在 IE7 中不支持这种类型的布局。唯一优雅的解决方案是将 HTML 源代码更改为支持它的内容。任何 jQuery 解决方案都会以某种方式变得笨拙。

Answer 2

您可以尝试将溢出添加到类 .listitem 中：

overflow:visible;

但是，如果您希望您的 div 与项目完全对齐，请确保列表高度和 div 高度相等（包括填充）。

例如，如果您的项目高度为 40 像素，则您的 div 高度（内边距设置为 10 像素）必须为 20 像素。并去掉top:10px;

.layer {
    position:absolute;
    top:-1px;
    right:10px;
    padding:5px;
    background:#993300;
    border:solid 1px #FFF;
    z-index:100;
    overflow:visible;
    height:20px;
}

在这个例子中，我将 padding 设置为 5px 以保持文本垂直居中。高度设置为 20 像素（2x 填充 + 高度 = 项目高度）。并且top设置为-1px来处理1px的边框。

http://jsfiddle.net/KtMbA/

希望对您有所帮助！

Answer 3

这是一个可行的解决方案：（在 IE10、FF、Chrome、IE10 上使用 IE7/IE8/IE9 模式进行测试）

http://jsfiddle.net/avrahamcool/dEBuC/4/

解决方案是使用脚本为listitem 元素赋予不同的z-index。