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

我有一个真正的。。。除了我正在开发的带有窗口系统的InternetExplorer之外，没有其他浏览器出现了bizzare错误。基本上，这些窗口是绝对定位的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");

    }
}

函数创建新窗口（url、标题、类型）
{
//是否已经存在另一个具有该特定类型的窗口？
//如果是这样，只需将其指向新链接，而不必实际生成新窗口。
var cancelSpawn=false；
if（$（'.windowType_'+type）.length）
{
//更新窗口中包含的iframe的SRC属性。这应该是有效的
//也重新加载窗口。
$（'.windowType_'+type）.children（“iframe”）.attr（“src”，“darknova4/”+url）；
}否则{
//首先，创建窗口
$（“正文”）。附加(
" \
\
“+标题+”\
\
\
");
//将此窗口移到堆栈顶部
$（.newspawn”）.parent（.window”）.css（“z-index”，windowZIndex++）；
//设置此窗口类型的数据，将用于防止以后打开复制窗口
$（“.newspawn”）.addClass（“窗口类型”+类型）；
//设置用于移动、调整大小和其他内容的窗口
设置窗口（）；
//最后，从窗口中删除“newspawn”标志，因为它有内容，我们不需要再使用它了。
$（“.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>");

$（“正文”）.append(
" \
\
“+标题+”\
\
\
");

请注意相对位置，这应该是对象的默认位置，但不是因为堆叠错误。这段代码的结果是，窗口显示了，iFrame显示了，所有这些看起来都很好，直到您尝试使用它为止。我无法解释原因，但将鼠标移到iFrame上会导致它消失。我在该站点上没有与鼠标移动事件相关的代码，在iFrame的页面上也没有导致它在mouseover上执行任何操作的代码。真奇怪。有人知道它为什么会这样吗

如果您需要亲自查看这种行为，我已经在www.darknovagames.com上对系统进行了测试，该测试在firefox中运行良好，但正如前面提到的那样，在IE中非常奇怪。如果您认为有帮助，我可以发布更多代码，但我认为这就是错误所在。也就是说，我很乐意在父窗口上发布CSS，并为我的鼠标事件发布JavaScript，等等

---

感谢所有能对这种奇怪行为提供一些见解的人

尝试从iframe内的HTML元素中删除

position:relative

。这似乎解决了IE8（以及IE8的兼容模式）中的问题

更新：解决高度问题

添加

位置：绝对位置；左：0px；顶部：0px；底部：0px；右：0px修复了由上述位置引起的高度问题：IE7和IE8中的相对变化

有了这两个修复，iframe在我的机器上的IE7、IE8和模拟IE7的IE8中似乎工作正常。
我认为这与MS IE中的垫片技术问题有关

IFRAME是无窗口元素，因此IFRAME的z索引可能与outline DIV z索引不同步

有关更多信息，请参阅

请再看一看

（无法正确显示带有名称的MS KB链接，可能是SO中的错误）。
意味着在IE8版本中，iFrame会按预期显示吗？那很有趣。我想知道为什么id在IE8测试版（这是我可以访问的）或IE7中不起作用？是的，它出现在IE8中。小提示：iframe没有在全高显示（它只有大约100-150px高），但没有闪烁或消失。在iframe中添加“position:absolute；left:0px；top:0px；bottom:0px；right:0px；”可以解决IE8中的高度问题，但消除了iframe正文中新闻项的左边距。这真的是一个功能失调行为的美丽链条。我只是正确地阅读了以下内容：iframe中的HTML元素将在我包含的页面上。很有趣的是，它是这样工作的。隐马尔可夫模型。。。我想知道IE是否会尊重iframe页面上HTML元素的z索引并实际使用它？这不可能是正确的行为，但它肯定是一个方便的bug。我明天就试试，你不会相信的。早些时候，我将iFramed页面的代码全部转换为严格的doctype。但是，我没有删除过渡doctype，而是将其注释掉了。IE显然忽略了评论，同时错误地应用了两个doctype，这基本上导致了我所有的问题。这的确是一个奇怪的错误，但现在似乎已经全部解决了。非常感谢您为我指明了正确的方向。在IE6中，它的行为略有不同。窗口显示出来，可以拖动-但它没有内容（也没有关闭按钮），就在页面加载时。是的，我应该明确地提到，我很久以前就放弃了对IE6的支持，我的所有网站项目。在我看来，试图支持2代旧软件是愚蠢的，你知道吗？你的iframe有任何内容吗？外部分区的大小是多少？