IE7模态对话框滚动条重叠内容
[英]IE7 modal dialog scrollbars overlap content
问题描述
Here's the offending code. 
这是有问题的代码。 To test it, save it in a file called "test.html" and click the button in the top-left corner. 要测试它，请将其保存在名为“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>
If I open the page in normal IE7 window, it works fine. 如果我在正常的IE7窗口中打开页面，它工作正常。
However, if I open it in an IE7 modal dialog, it draws the vertical scrollbar on top of the margin. 但是，如果我在IE7模式对话框中打开它，它会在边距顶部绘制垂直滚动条。 What's even worse, because it draws the scrollbar on top of the margin, it also causes a horizontal scrollbar to be drawn. 更糟糕的是，因为它在边距顶部绘制滚动条，它还会导致绘制水平滚动条。
How do I work around this? 我该如何解决这个问题？ I absolutely must use the IE modal dialog, I'm not at liberty to change that. 我绝对必须使用IE模式对话框，我不能随意改变它。
4 个解决方案
解决方案1
3 2009-07-27 09:22:57
更改window.showModalDialog选项以使用width：300px而不是dialogWidth：300px - 水平滚动条消失，垂直滚动条位于边距右侧。
解决方案2
1 2010-04-19 23:47:07
As you mention, the IE modal dialog does not quite work like a normal browser window. 正如您所提到的，IE模式对话框并不像普通的浏览器窗口那样工作。 By trying various things, you can sort of reverse engineer how it works and pull some compensating tricks. 通过尝试各种各样的事情，你可以对它的工作方式进行反向工程并提取一些补偿技巧。 You stated that you have control of the HTML, that it's OK to use Javascript, so here's what I came up with. 你声明你可以控制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>
The crux of this code is to resize the width of the <div> that contains the content. 这段代码的关键是调整包含内容的<div>的宽度。 Ordinarily this width would be the width of the window (less the margins), but in the case of the IE modal dialog, we should use the width of the window less the scrollbar width. 通常这个宽度将是窗口的宽度（减去边距），但是在IE模式对话框的情况下，我们应该使用窗口的宽度减去滚动条的宽度。 This is given to us by document.documentElement.clientWidth . 这是由document.documentElement.clientWidth提供给我们的。 We do this resizing when the dialog is loaded and whenever it is resized. 我们在加载对话框和调整大小时调整大小。
The initial width of the body (upon load, but before we resize the <div> )seems to confuse IE, so we set it to 1px . 正文的初始宽度（在加载时，但在我们调整<div> ）似乎混淆了IE，因此我们将其设置为1px 。 So that's a 'magic number' in the code, as is the var margin = 20 ; 所以这是代码中的“神奇数字”， var margin = 20 ; , which must match the CSS margin . ，必须与CSS margin匹配。 I've also set the div height to 500px so that it's easier to see what happens when the vertical scroll bar is on or off. 我还将div height设置为500px以便更容易看到垂直滚动条打开或关闭时会发生什么。
I've tested this in IE6/7/8 and Chrome on Windows XP, and FF3.6 and Chrome on the Mac. 我已经在IE6 / 7/8和Windows XP上的Chrome以及Mac上的FF3.6和Chrome上进行了测试。 I've made the code here as simple as possible, so if the contents of your div get more complicated hopefully you'll be able to modify the Javascript as necessary. 我在这里使代码尽可能简单，所以如果div的内容变得更复杂，希望你能够根据需要修改Javascript。 Hope this works for you. 希望这对你有用。
解决方案3
1 2009-05-01 18:35:46
Add a 20px margin to the right of #test and increase the width of the dialog: 在#test右侧添加20px的边距并增加对话框的宽度：
http://jsbin.com/ujevu http://jsbin.com/ujevu
You'll still have a horizontal scrollbar but at least the content isn't obscured. 你仍然会有一个水平滚动条，但至少内容不会被遮挡。
解决方案4
0 2009-05-10 18:18:28
You could work around this issue, by doing what brianpeiris suggests (add margin for the scrollbar) and adding an overflow-x:hidden; 您可以通过执行brianpeiris建议（为滚动条添加边距）并添加overflow-x：hidden来解决此问题; css to your html element. css到你的HTML元素。 This will hide the horizontal scrollbar. 这将隐藏水平滚动条。
IE seems to treat modal windows really oddly, so most of the normal ideas (javascript window resize, css fixed pixel widths) don't work inside an "IE Modal Window" IE似乎很奇怪地处理模态窗口，因此大多数正常的想法（javascript窗口调整大小，css固定像素宽度）在“IE模态窗口”内部不起作用
-- -
Additionally, you could simply add a flag to your showModalDialog call, to remove the scrollbars completely, without changing any html / css. 此外，您只需在showModalDialog调用中添加一个标志，即可完全删除滚动条，而无需更改任何html / css。
The documentation on how to do this is available in the MSDN documentation http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx 有关如何执行此操作的文档，请参阅MSDN文档http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx
In your code, if you wanted to remove the scrollbars, it would look something like this 在您的代码中，如果您想删除滚动条，它将看起来像这样
onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes; scroll:off;');"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.