在IE 6和7中使用列表和表格进行绝对定位/ Z-Index时遇到问题

Question

在IE 6和7中使用列表和表格进行绝对定位/ Z-Index时遇到问题

11 css html-table list z-index css-position

我正在创建一个基于CSS/XHTML表的日历的原型,最终将使用PHP为Simple Updates内容管理系统生成.我遇到了一个问题,即使用绝对定位来创建一个弹出窗口,该弹出窗口会在一天内显示所有事件,而这些事件不仅适合单元格.问题可以在这里看到:

http://sutest.bravehost.com/

如您所见,弹出窗口在IE7和IE6中的多日事件和日期下弹出.在弹出窗口上放置z-index修复了Firefox中的问题.我已经尝试在弹出窗口中放置各种z-index值,更改弹出窗口和相关元素的显示属性,以及许多其他不同的方法,但没有成功.

HTML如下:

<td valign="top"><div>
    <div class="date">25</div>
    <ul>
        <li class="single"><a href="#">History</a></li>
        <li class="single"><a href="#">Biology</a></li>
        <li class="single"><a href="#">Computers</a></li>
        <li class="single"><a href="#">POTCH</a></li>
        <li class="single"><a href="#">Precal</a></li>
        <li class="more"><a href="#">+3 More</a></li>
    </ul>
    <div class="popup">
        <span class="close"><a href="#">X</a></span>
        <ul>
            <li class="single"><a href="#">History</a></li>
            <li class="single"><a href="#">Biology</a></li>
            <li class="single"><a href="#">Computers</a></li>
            <li class="single"><a href="#">POTCH</a></li>
            <li class="single"><a href="#">Precal</a></li>
            <li class="single"><a href="#">Science PC</a></li>
            <li class="single"><a href="#">Physics</a></li>
            <li class="single"><a href="#">Construction</a></li>
        </ul>
    </div>
</div></td>

Run Code Online (Sandbox Code Playgroud)

这是表格中带有硬编码弹出窗口的单元格.第一个列表包含正常的可见事件.包含第二个div的div是弹出窗口.它应该显示在多日活动中:

<td valign="top" class="blank"><div>
    <div class="date">2</div>
    <ul>
        <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li>
    </ul>
</div></td>

Run Code Online (Sandbox Code Playgroud)

我正在使用列表项来"伪造"多日活动.这一天的li被设计为看到在IE 6和7中弹出窗口的条形图.

与弹出窗口相关的CSS:

.popup {
position:absolute;
top:-1px;
background-color:white;
border:1px solid black;
overflow:visible;
padding:10px;
width:auto;
z-index:1;
margin-left:-1px;
}

Run Code Online (Sandbox Code Playgroud)

而对于多日活动:

li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}

Run Code Online (Sandbox Code Playgroud)

我试图通过反复搜索Google并尝试其他问答网站来解决这个问题.

任何帮助将不胜感激!

Answer 1

jim*_*imr 22

使用position: relative在IE中相对定位的元素内部设置新的z-index堆叠上下文.

相对定位元素内的元素将根据它们堆叠z-index,但是当与父元素外部的元素交互时,使用父元素z-index.这就是为什么弹出窗口显示在多日事件元素下面的原因(因为即使元素上没有明确z-index的元素,文档中"稍后" 出现的元素也会隐含高于z-index之前的元素)

要修复它,你也可以

不在position-relative单元格上使用并将弹出窗口相对于整个文档放置
使容器<div>高于z-index文档中的容器.

我发现z-index用JavaScript以编程方式更改是最好的,因为它最大限度地减少了与页面其余部分的奇怪交互(即在z-index打开时设置较高,并在关闭时将其重置为默认值)

一些博客文章谈论这个问题:

归档时间：	16 年，4 月前
查看次数：	21053 次
最近记录：	9 年，1 月前