3

这是有问题的代码。要对其进行测试，请将其保存在名为“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

4 回答 4

3

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

于 2009-07-27T09:22:57.930 回答
1

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

http://jsbin.com/ujevu

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

于 2009-05-01T18:35:46.700 回答
1

正如您所提到的，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以便更容易看到垂直滚动条打开或关闭时会发生什么。

我已经在 Windows XP 上的 IE6/7/8 和 Chrome 以及 Mac 上的 FF3.6 和 Chrome 中对此进行了测试。我已经使这里的代码尽可能简单，所以如果您的内容div变得更复杂，希望您能够根据需要修改 Javascript。希望这对你有用。

于 2010-04-19T23:47:07.637 回答
0

您可以通过执行 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;');"
于 2009-05-10T18:18:28.947 回答