Question

这是有问题的代码。要测试它，请将其保存在名为“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模式对话框，我不能随意改变它。

Answer 1

更改window.showModalDialog选项以使用width：300px而不是dialogWidth：300px - 水平滚动条消失，垂直滚动条位于边距右侧。

Answer 2

在#test右侧添加20px的边距并增加对话框的宽度：

http://jsbin.com/ujevu

你仍然会有一个水平滚动条，但至少内容不会被遮挡。

Answer 3

正如您所提到的，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。希望这对你有用。

Answer 4

您可以通过执行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模态对话框滚动条重叠内容

4 个答案: