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; left: 0px; top: 0px; bottom: 0px; right: 0px;添加到iframe可修复因IE7和IE8中上述position: relative更改而导致的高度问题。

有了这两个修复程序，iframe似乎在我的机器上模拟IE7的IE7，IE8和IE8中正常工作。

Answer 2

我认为它与MS IE中的填充技术问题有某种关系。

IFRAME是无窗口元素，因此IFRAME的z-index可能与大纲DIV z-index不同步。

有关详细信息，请参阅http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/q177/3/78.asp&NoWebContent=1。

请同时查看this。

（无法正确显示MS KB链接，可能是SO中的错误。）

Internet Explorer和Very Strange iFrame行为的情况

2 个答案: