Html 位置相对列表项内的位置绝对div-剪裁问题-ie7

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

我在每个列表项中都有绝对位置div。但绝对div隐藏在IE7中的div中。最后一节似乎还可以

屏幕截图

JSFIDDLE：

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>

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

你知道如何在IE7中解决这个问题吗

---

提前感谢。

您可以尝试将溢出添加到类中。列表项：

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边界

---

希望能有帮助

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

解决方案是使用脚本为

listitem

元素提供不同的

z-index

。

添加包装器元素

如果编辑HTML源代码是一个选项，那么在侧内容周围添加一个包装器元素，并将其放在主文本内容之前。然后将

position:relative

添加到包装器元素，而不是将其添加到

.listitem

。这会将本地堆栈上下文（在IE7中不方便的时候创建）移动到一个不会造成伤害的元素

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>

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

jQuery 如果编辑HTML源代码不是一个选项，那么使用jQuery有几个选项可用

采用@avrahamcool提供的基本方法（将每个

.listitem

的z索引设置为一个递减的小值）。这种方法的缺点是，它颠倒了侧元素相对于彼此的分层顺序，这可能是可以接受的，也可能是不可以接受的

使用jQuery编辑HTMLDOM，使HTML如上图所示，同时使用相关的CSS更改。这种方法的缺点是，直到jQuery代码运行之后，内容的样式才会正确呈现。因此，当页面第一次加载时，内容可能会短暂地出现中断

将

.container

设置为

位置：相对
，而不是
.listitem
。使用jQuery计算
.container
中每个
.listitem
元素的相对位置，并基于此设置每个边元素的
顶部
位置。这种方法的缺点与解决方案2相同

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

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;
}

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

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

结论

---

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

我无法对齐其中的层。里面的内容可能会增加，所以在保持listitem高度不变的情况下，应该可以在外面看到。read@avrahamcool这与我的问题有什么关系？soory。我的意思是错误的链接。@avrahamcool该解决方案对我不起作用。更改HTML源代码是一种选择吗？这种方法的缺点是，相对于其他元素，边元素现在按相反的顺序分层，这可能是可以接受的，也可能是不可以接受的。如果这是他的布局问题，我们总能找到一种类似的方法来解决他的特殊情况。“非常感谢，”马特·考格林说