代码之家 › 专栏 › 技术社区 › to StackOverflow

ModalPopupExtender不适用于IE6框架布局

modalpopupextender ajaxcontroltoolkit css asp.net

0

to StackOverflow · 技术社区 · 14 年前

我使用的“框架”布局与 this excellent answer :页面顶部的DIV顶部,左侧的DIV左侧,以及带有主要内容的DIV主要。顶部和左侧分隔符包含导航菜单。

现在,我想使用内容(main)分区内的AjaxControlToolkit modalpopupExtender来使用弹出式分区。

这在IE8上很有效(其中,top,left,main都有位置:fixed),但是当我在IE6上运行它时,模式背景只覆盖main div-我需要它覆盖整个页面,包括top和left导航div。

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

有没有建议最好/最简单的方法来让这个在IE6上正常工作?理想情况下,不修改modalpopupExtender代码,但如果必须这样做,我会这样做,这是最好的解决方案。

1 回复 | 直到 14 年前

1

0

Community Ian Goodfellow 7 年前

我已经在 this answer ,这似乎解决了问题:

对于IE6,有条件地使主DIV位置:静态,左边距等于左边部分的宽度。不幸的是,页边空白顶部在IE6中似乎不起作用,所以…
对于IE6,有条件地在主DIV之前添加一个ID为IE6的空DIV。
将IE6隔套DIV的高度设置为与顶部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>