jquery - Internet Explorer 和非常奇怪的 iFrame 行为案例

Question

我遇到了一个真正的...bizzare 错误，除了 Internet Explorer 和我正在开发的窗口系统之外。基本上，窗口是绝对定位的 div，其中包含显示其页面并随其调整大小的 iFrame。在所有其他浏览器中，这按预期工作正常，但在 IE 中，iFrame 没有显示...正确。

我生成新窗口的原始代码如下所示:

function spawnNewWindow(url, title, type)
{
    //Does another window with that particular type already exist?
    //If so, just point it at the new link without actually spawning a new window.
    var cancelSpawn = false;
    if ( $('.windowType_'+type).length )
    {
        //Update the SRC attribute for the iframe contained within the window. This should effectively
        //reload the window too.
        $('.windowType_'+type).children("iframe").attr("src", "/darknova4/"+url);
    } else {


    //First, create the window
    $("body").append(
    "<div class='window'> \
    <div class='resizeArea'></div> \
    <div class='titlebar'>"+title+"</div> \
    <div class='closeWindow'></div> \
    <div class='windowContent newspawn'><iframe src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
    </div>");

    //Move this window to the top of the stack
    $(".newspawn").parent(".window").css("z-index", windowZIndex++);

    //Set the data for this window's type, will be used to prevent copy windows being open later
    $(".newspawn").addClass("windowType_"+type);

    //Set up the window for moving and resizing and other stuff
    setupWindows();

    //Finally, remove the "newspawn" flag from the window, since it has content and we don't need work with it anymore.
    $(".newspawn").removeClass("newspawn");

    }
}

在 Internet Explorer 上，这会产生一个空白的白色窗口，这表示一个不可见的 iFrame，因为我所有的窗口页面都有黑色背景。我怀疑是著名的(但仍未完全修复)z-index 错误，因此我进行了以下更改以使用堆叠顺序并查看是否可以找到快速修复:

$("body").append(
"<div class='window'> \
<div class='resizeArea'></div> \
<div class='titlebar'>"+title+"</div> \
<div class='closeWindow'></div> \
<div class='windowContent newspawn'><iframe style='position: relative;' src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
</div>");

注意相对位置，应该是对象的默认位置，但不是因为堆叠错误。这段代码发生的情况是，窗口出现了，iFrame 出现了，一切看起来都很好，直到您尝试使用它。我无法解释原因，但是 将鼠标悬停在 iFrame 上 会导致它消失。我在网站上没有与鼠标移动事件相关的代码，在 iFrame 的页面上也没有代码会导致它在鼠标悬停时执行任何操作。这真的很奇怪。有没有人知道它为什么会这样？

如果您需要亲自查看此行为，我已经在 www.darknovagames.com 上对实现的系统进行了测试，它在 firefox 中运行良好，但如前所述，在 IE 中确实很奇怪。如果您认为有帮助，我可以发布更多代码，但这是我认为错误的地方。也就是说，我很乐意在父窗口上发布 CSS 以及鼠标事件的 JavaScript 等。

感谢任何可以提供有关这种奇怪行为的见解的人。

Answer 1

尝试从 iframe 内的 HTML 元素中删除 position: relative。这似乎解决了 IE8(以及 IE8 的兼容模式)中的问题。

更新:修复高度问题

添加position:absolute；左:0px；顶部:0px；底部:0px； right: 0px; 到 iframe 修复了上述 position: relative 在 IE7 和 IE8 中变化引起的高度问题。

两个修复都已到位后，iframe 似乎在 IE7、IE8 和 IE8 中正常运行，在我的机器上模拟 IE7。