IE7模态对话框滚动条重叠内容
[英]IE7 modal dialog scrollbars overlap content
问题描述
这是有问题的代码。 要测试它，请将其保存在名为“test.html”的文件中，然后单击左上角的按钮。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Blarg</title>
<style type='text/css'>
body { margin: 20px; }
#test { background: red; height: 2000px; }
</style>
</head>
<body>
<div id="test"><input type='button' onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes;');" /></div>
</body>
</html>
如果我在正常的IE7窗口中打开页面，它工作正常。
但是，如果我在IE7模式对话框中打开它，它会在边距顶部绘制垂直滚动条。 更糟糕的是，因为它在边距顶部绘制滚动条，它还会导致绘制水平滚动条。
我该如何解决这个问题？ 我绝对必须使用IE模式对话框，我不能随意改变它。
4 个解决方案
解决方案1
3 2009-07-27 09:22:57
更改window.showModalDialog选项以使用width：300px而不是dialogWidth：300px - 水平滚动条消失，垂直滚动条位于边距右侧。
解决方案2
1 2010-04-19 23:47:07
正如您所提到的，IE模式对话框并不像普通的浏览器窗口那样工作。 通过尝试各种各样的事情，你可以对它的工作方式进行反向工程并提取一些补偿技巧。 你声明你可以控制HTML，可以使用Javascript，所以这就是我想出来的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Blarg 2</title>
<style type='text/css'>
body { margin: 20px; width:1px}
#test { background: red; height: 500px; }
</style>
<script>
window.onload=windowResized;
window.onresize=windowResized;
function windowResized()
{
var cw = document.documentElement.clientWidth ;
var margin = 20 ;
document.getElementById("test").style.width=(cw-2*margin)+"px" ;
}
</script>
</head>
<body>
<div id="test" >
<input type='button'
onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes;');" />
There is a bit more than meets the eye here.
</div>
</body>
</html>
这段代码的关键是调整包含内容的<div>的宽度。 通常这个宽度将是窗口的宽度（减去边距），但是在IE模式对话框的情况下，我们应该使用窗口的宽度减去滚动条的宽度。 这是由document.documentElement.clientWidth提供给我们的。 我们在加载对话框和调整大小时调整大小。
正文的初始宽度（在加载时，但在我们调整<div> ）似乎混淆了IE，因此我们将其设置为1px 。 所以这是代码中的“神奇数字”， var margin = 20 ; ，必须与CSS margin匹配。 我还将div height设置为500px以便更容易看到垂直滚动条打开或关闭时会发生什么。
我已经在IE6 / 7/8和Windows XP上的Chrome以及Mac上的FF3.6和Chrome上进行了测试。 我在这里使代码尽可能简单，所以如果div的内容变得更复杂，希望你能够根据需要修改Javascript。 希望这对你有用。
解决方案3
1 2009-05-01 18:35:46
解决方案4
0 2009-05-10 18:18:28
您可以通过执行brianpeiris建议（为滚动条添加边距）并添加overflow-x：hidden来解决此问题; css到你的HTML元素。 这将隐藏水平滚动条。
IE似乎很奇怪地处理模态窗口，因此大多数正常的想法（javascript窗口调整大小，css固定像素宽度）在“IE模态窗口”内部不起作用
-
此外，您只需在showModalDialog调用中添加一个标志，即可完全删除滚动条，而无需更改任何html / css。
有关如何执行此操作的文档，请参阅MSDN文档http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx
在您的代码中，如果您想删除滚动条，它将看起来像这样
onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes; scroll:off;');"
IE7 模态对话框 - 定位错误？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.