Question

我正在使用类似于this excellent answer中的“框架”布局：页面顶部的div #top，左边的div＃左边，以及带有main的div #main内容。 #top和#left div包含导航菜单。

现在我想在内容（#main）div中使用一个使用AjaxControlToolkit ModalPopupExtender的popup div。

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

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

有关在IE6上正常运行的最佳/最简单方法的建议吗？理想情况下，无需修改ModalPopupExtender代码，但如果必须，我会这样做，这是最好的解决方案。

Answer 1

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

对于IE6，有条件地使#main div位置：static，margin-left等于 #left div的宽度。不幸的是，margin-top似乎在IE6中不起作用，所以......
对于IE6，有条件地在主div之前添加一个id为is6-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>

ModalPopupExtender不适用于IE6帧布局

1 个答案: