ModalPopupExtender 不适用于 IE6 框架布局答案

【问题标题】：ModalPopupExtender doesn't work on IE6 frame layoutModalPopupExtender 不适用于 IE6 框架布局
【发布时间】：2011-03-04 02:17:11
【问题描述】：

我正在使用类似于this excellent answer 中的“框架”布局：页面顶部的 div #top、左侧的 div#left 和包含主要内容的 div #main。 #top 和 #left div 包含导航菜单。

现在我想在内容 (#main) div 中使用 AjaxControlToolkit ModalPopupExtender 来使用弹出 div。

这在 IE8 上运行良好（其中#top、#left、#main 都有位置：固定），但是当我在 IE6 上运行它时，模态背景只覆盖了#main div - 我需要它来覆盖整个包括 #top 和 #left 导航 div 的页面。

查看 ModalPopupExtender 的脚本，它似乎正在向上搜索父层次结构，直到找到具有相对或绝对位置的父级。而在 IE6 渲染中，#main div 具有 position:absolute 因为 position:fixed 不受支持，我想这可以解释发生了什么。

对于在 IE6 上正常工作的最佳/最简单方法有什么建议吗？理想情况下不修改 ModalPopupExtender 代码，但如果必须，我会这样做，这是最好的解决方案。

【问题讨论】：

标签： asp.net css ajaxcontroltoolkit modalpopupextender

【解决方案1】：

我在this answer 中实现了解决方案的变体，似乎解决了问题：

对于 IE6，有条件地使 #main div position:static with margin-left 等于 #left div 的宽度。不幸的是，margin-top 似乎在 IE6 中不起作用，所以...
对于 IE6，有条件地在主 div 之前添加一个 id 为 ie6-spacer 的空 div。
将 ie6-spacer div 的高度设置为与#top div 相同的高度。

这似乎是诀窍。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>'Frames' using &lt;div&gt;s</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #top, #left, #main {
      position: fixed;
      overflow: hidden;
    }

    #top {
      top: 0;
      width: 100%;
      background-color: #ddd;
      height: 100px;
    }

    #left {
      left: 0;
      top: 100px;  /* move everything below #top */
      bottom: 0;
      background-color: #bbb;
      width: 120px;
    }

    #main {
      top: 100px;
      left: 120px;
      bottom: 0;
      right: 0;
      overflow: auto;
    }
  </style>
  <!--[if IE 6]>
  <style>
    #top, #left {
      position: absolute;
    }

    #ie6-spacer {
        height:100px;
    }

    #left {
      height: expression((m=document.documentElement.clientHeight-100)+'px');
    }

    #main {
      margin-left:120px;
      height: expression((m=document.documentElement.clientHeight-100)+'px');
      width: expression((m=document.documentElement.clientWidth-120)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="top">Title<br /></div>
  <div id="left">LeftNav<br /></div>
  <!--[if IE 6]>
  <div id="ie6-spacer"></div>
  <![endif]--> 
  <div id="main">
    <p>
        Lorem ipsum ...<br />
        <!-- just copy above line many times -->
    </p>
  </div>
</body>
</html>

【讨论】：

很高兴您找到了这个解决方案，但我认为它不是一个整洁的解决方案。我也使用了这种弹出窗口，并在#top、#left 和#main（等）之外放置了一个模态对话框 div，具有 100% 的宽度和高度以及较大的 z-index，涵盖所有内容显示时（有点透明度）。在那个上方，我放置了包含对话框面板的 div。但无论如何，它对你有用，所以谁在乎……
@Marcel，感谢您的评论，我当然愿意接受更好的解决方案。我的问题是我使用的是 ASP.NET WebForms 和 AjaxControlToolkit，所以对 div 的放置没有太多控制。目前，我有一个带有基本布局（顶部/左侧/主 div 和导航）的母版页，以及一个嵌套母版页，用于使用包含主要内容占位符、ModalPopupExtender 和弹出内容占位符的弹出窗口的页面.因此，嵌套的母版页内容位于主 div 内。应用开发者只需要专注于提供主要和弹出内容。
嗨乔，我已经以为你有这样的限制。由于我对 ASP.NET 没有任何了解，因此无法就使用 WebForms 和 AjaxControlToolkit 向您提供建议。但我已经说过：如果它没有坏，就不要修理它！
@Marcel，再次感谢。我会听从这个建议，特别是因为 IE6 的东西仅用于旧版支持，并且有望在不久之后消失。