ModalPopupExtender 不适用于 IE6 框架布局

发布于 2024-09-05 08:58:57 字数 658 浏览 7 评论 0原文

我使用的“框架”布局类似于这个出色的答案：页面顶部有一个 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 代码，但如果必须的话我会这样做，这是最好的解决方案。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半暖夏伤 2024-09-12 08:58:57

我在这个答案中实现了解决方案的变体，这似乎解决了问题：

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

I've implemented a variant of the solution in this answer, which appears to solve the problem:

For IE6, conditionally make the #main div position:static with margin-left equal to the
width of the #left div. Unfortunately margin-top doesn't seem to work in IE6, so...
For IE6, conditionally add an empty div with the id ie6-spacer before the main div.
Set the height of the ie6-spacer div to the same height as the #top div.

This appears to the trick.

<!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 <div>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>

回复收藏 0 原文

~没有更多了~