ModalPopupExtender在IE6框架布局上不起作用 [英] ModalPopupExtender doesn't work on IE6 frame layout
问题描述
我正在使用类似于这个出色的答案：页面顶部的div #top，左侧的div＃left，以及包含主要内容的div #main。 #top和#left div包含导航菜单。
I'm using a "frame" layout similar to the one in this excellent answer: a div #top at the top of the page, a div#left on the left, and a div #main with the main content. The #top and #left divs contain navigation menus.
现在，我想通过内容（#main）div中的AjaxControlToolkit ModalPopupExtender使用弹出div。
Now I want to use a popup div using the AjaxControlToolkit ModalPopupExtender inside the content (#main) div.
这在IE8上效果很好（其中＃top，＃left，＃main均已固定：），但是当我在IE6上运行时，模式背景仅覆盖#main div-我需要它来覆盖整个页面，包括#top和#left导航div。
This works fine on IE8 (where #top, #left, #main all have position:fixed), but when I run it on IE6, the modal background only covers the #main div - I need it to cover the whole of the page including the #top and #left navigation divs.
看一下ModalPopupExtender的脚本，它似乎正在向上搜索父级层次结构，直到找到具有相对或绝对位置的父级。在IE6渲染中，#main div具有position：absolute，因为不支持position：fixed，我想这可以解释发生了什么。
Looking at the script for ModalPopupExtender, it appears to be searching up the parent hierarchy until it finds a parent with position relative or absolute. And in the IE6 rendering, the #main div has position:absolute because position:fixed is not supported, which I guess explains what is happening.
最好的任何建议/最简单的方法来使其在IE6上正常工作？理想情况下，无需修改ModalPopupExtender代码，但是如果需要的话，我会这样做，这是最好的解决方案。
Any suggestions for the best/easiest way to get this working properly on IE6? Ideally without modifying the ModalPopupExtender code, but I'll do this if I have to and it's the best solution.
推荐答案
我' ve在此答案中实现了该解决方案的变体，似乎可以解决问题：
I've implemented a variant of the solution in this answer, which appears to solve the problem:
-
对于IE6，有条件地使#main div位置：带边距的静态- left等于#left div的
宽度。不幸的是，margin-top在IE6中似乎不起作用，所以...
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...
对于IE6，有条件地在ID之前添加一个空ID为ie6-spacer的div
For IE6, conditionally add an empty div with the id ie6-spacer before the main div.
将ie6-spacer div的高度设置为与#top div相同的高度。
Set the height of the ie6-spacer div to the same height as the #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>
这篇关于ModalPopupExtender在IE6框架布局上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
