iframe 中的 z-index 问题答案

【问题标题】：Issue with z-indexes within an iframeiframe 中的 z-index 问题
【发布时间】：2015-02-14 00:04:24
【问题描述】：

我正在开发一个将在现有应用程序的 iFrame 中使用的 asp.net Web 应用程序。应用需要支持IE8及以上。

该应用程序在 IE8 中看起来不错，但是一旦在 iFrame 中呈现它，它似乎就忽略了 z-indexing。这基本上是我正在尝试使用的代码。

HTML：

<div id="top" class="block">
    <div id="clueTipOuter">
        <div class="show">
            Show ClueTip
        </div>
        <div class="clueTip">                                                            
            Some Text
        </div>   
    </div>
</div>
<div id="bottom" class="block">
    content and cluetip
</div>

CSS：

.block {
    background-color:lightgrey;
    border:thin solid;
    margin-bottom: 10px;
    position:relative;
}
.clueTip {
    display:none;
    background-color:white;
    position:fixed;
    z-index:20;
}

JavaScript：

$('.clueTipOuter').each(function {
    var show = $(this).find('.show');
    var clueTip = $(this).find('.clueTip');    

    show.mouseover(function () {
        clueTip.css({ 'left': event.clientX + 20, 'top': event.clientY - 15});
        clueTip.show(150);
    });

    $(this).mouseleave(function () {
        clueTip.hide(80);
    }
});

将 IE8 与 iFrame 一起使用，“clueTip”最终显示在“below”div 下方。我不知道为什么会发生这种情况。

我搜索了论坛，发现了很多关于 z-indexing 的帖子，但没有一个能真正回答我的问题。感谢您的帮助。

【问题讨论】：

标签： jquery css iframe internet-explorer-8 z-index

【解决方案1】：

更新：

我认为 iframe 不可能导致这些不一致，但事实证明并非如此......我们现有的应用程序默认以兼容模式显示，结果证明这是导致此问题的根本原因在 IE 中。

万一其他人遇到同样的问题，我想我会提供我想出的见解。

【讨论】：