Question

我正在开发一个将在现有应用程序的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”最终显示在“下方”div下方。我很遗憾为什么会发生这种情况。

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

Answer 1

更新：

我认为iframe不可能造成这些不一致，转而不是......我们现有的应用程序默认以兼容模式显示，这是此问题的根本原因在IE中。

关于其他人有同样问题的机会，我想我会提供我所提出的洞察力。

iframe中的z-indexes问题

1 个答案: