3

我在 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 中解决此问题？

提前致谢。

4

3 回答 3

4

添加包装元素

更新的演示

如果可以选择编辑 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 提出的基本方法（将每个的 z-index 设置.listitem为越来越小的值）。这种方法的缺点是它颠倒了侧面元素相对于彼此的分层顺序，这可能是可接受的，也可能是不可接受的。

  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 解决方案都会以一种或另一种方式变得笨拙。

于 2013-09-10T15:55:13.113 回答
0

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

overflow:visible;

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

例如，如果您的项目高度为 40 像素，则您的 div 高度（内边距设置为 10 像素）必须为 20 像素。并删除顶部：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/

希望它会有所帮助！

于 2013-09-10T07:36:04.963 回答
0

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

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

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

于 2013-09-10T11:31:10.180 回答