Question

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

我的位置绝对div包含每个列表项。但绝对div隐藏在IE7中的div内。最后一个div似乎没问题。

SCREENSHOT

enter image description here

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提供一些选项。

采用@avrahamcool提出的基本方法（将每个.listitem的z-index设置为一个递减的小值）。这种方法的缺点是它颠倒了侧面元素相对于彼此的分层顺序，这可能是也可能是不可接受的。
使用jQuery编辑HTML DOM，以便HTML如上所示，同时使用相关的CSS更改。这种方法的缺点是，在jQuery代码运行之前，内容的样式将无法正确呈现。因此，当页面首次加载时，内容可能会短暂出现。
将.container设置为position:relative，而不是.listitem。使用jQuery计算.listitem中每个.container元素的相对位置，并根据此位置设置每个边元素的top位置。这种方法与解决方案＃2具有相同的缺点。
在极端情况下，即使编辑JavaScript不是一个选项，您也可以通过添加一系列具有递减z-index值的越来越长的CSS选择器来模拟解决方案＃1（如下所示）。我不推荐这种方法，因为它非常不切实际，但它可以作为最后的手段使用。

<强> 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高度相等（包括填充）。

例如，如果您的项目高度为40px，则填充设置为10px的div高度必须为20px。并删除顶部：10px;

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

在这个例子中，我将填充设置为5px以保持文本中心垂直。高度设置为20px（2x填充+高度=项目高度）。顶部设置为-1px以处理1px边框。

http://jsfiddle.net/KtMbA/

希望它会有所帮助！

Answer 3

这是一个有效的解决方案:(测试时间：IE10，FF，Chrome，IE10使用IE7 / IE8 / IE9模式）

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

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

位置绝对div内部位置相对列表项 - 剪辑问题 - ie7

3 个答案:

添加包装元素

的jQuery

结论