三

这是违规代码。要测试它，请将其保存在名为“test.html”的文件中，然后单击左上角的按钮。

<!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0过渡//EN”“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.DTD"><html><头部>布拉格<style type='text/css'>正文{边距：20px；}#测试{背景：红色；高度：2000px；}</style></头><body><div id=“test”><input type='button'onclick=“javascript:window.showModalDialog（'test.html'，window，'dialogWidth:300px；resizable:yes；'）；”/></div></body></html>

如果我在普通的IE7窗口中打开页面，它会正常工作。

然而，如果我在IE7模式对话框中打开它，它会在页边空白处绘制垂直滚动条。更糟糕的是，因为它在页边空白的顶部绘制滚动条，所以还会导致绘制水平滚动条。

我该如何解决这个问题？我绝对必须使用IE模式对话框，我不能随意更改它。

改进这个问题
2
  • 你能详细说明一下这方面的基本规则吗？您希望IE7模式对话框适用于任何URL，还是只适用于您创建的HTML？HTML是否仅限于您这里的内容？Javascript是否被允许？IE模式对话框似乎与IE窗口和其他浏览器模式对话框不同，所以我们不能在水上行走。
    – 大脑堵塞
    评论 2010年4月19日0:56
  • @我当然可以。我控制HTML，HTML基本上就是我这里所拥有的，只是高度没有设置为2000px（而是随着内容的增加而增加），它只需要在模式对话框中工作，需要在IE和Firefox上工作。JavaScript当然是允许的。此外，水平滑块需要去掉，除非宽度比dialogWidth宽。
    – cdmckay公司
    评论 2010年4月19日5:50

4个答案4

重置为默认值
三

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

改进此答案
2
  • 现在唯一的问题是宽度：300px在Firefox中不起作用。
    – cdmckay公司
    评论 2010年1月15日0:24
  • 实际上，我重新检查了这个问题，但它并没有解决问题。它只是让它忽略了宽度。
    – cdmckay公司
    评论 2010年4月16日20:13
1

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

http://jsbin.com/ujevu

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

改进此答案
三
  • 这对我来说不是一个真正的解决方案。我希望它能正常工作。
    – cdmckay公司
    评论 2009年5月1日18:39
  • 所以你的意思是你想避免水平滚动条？
    – 布赖恩佩里斯
    评论 2009年5月1日18:45
  • 对。我不明白它如何在普通窗口中正常工作，但在模式窗口中却无法正常工作。这使我恼火。
    – cdmckay公司
    评论 2009年5月1日19:06
1

正如您所提到的，IE模式对话框不像普通浏览器窗口那样工作。通过尝试各种方法，您可以对其工作原理进行逆向工程，并使用一些补偿技巧。您说过您可以控制HTML，可以使用Javascript，下面是我想到的。

<!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0过渡//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.DTD"><html><头部>布拉格2<style type='text/css'>正文{边距：20px；宽度：1px}#测试{背景：红色；高度：500px；}</style><脚本>window.onload=windowResized；window.onresize=windowResized；函数窗口Resized（）{var cw=document.documentElement.clientWidth；var裕度=20；document.getElementById（“test”）.style.width=（cw-2*margin）+“px”；}</script></头><body><div id=“test”><输入类型=“按钮”onclick=“javascript:window.showModalDialog（'test.html'，window，'dialogWidth:300px；resizable:yes；'）；”/>这里有点不合时宜。</div></body></html>

此代码的关键是调整<div>包含内容的。通常，这个宽度是窗口的宽度（减去边距），但对于IE模式对话框，我们应该使用窗口宽度减去滚动条宽度。这是给我们的document.documentElement.client宽度。我们在加载对话框时以及调整对话框大小时都会进行此调整。

主体的初始宽度（加载时，但在调整<div>)似乎混淆了IE，所以我们将其设置为1个。所以这是代码中的“幻数”var裕度=20；，必须与CSS匹配边缘。我还设置了div高度到500像素这样，当垂直滚动条打开或关闭时，更容易看到发生了什么。

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

改进此答案
6
  • @Brainjam，我只是试一试。这确实是一个改进，但您仍然可以看到底部滚动条，这很糟糕，但我想这最终是不可避免的。
    – cdmckay公司
    评论 2010年5月4日17:05
  • @cdmckay：当我提交这个答案时，底部的滚动条没有出现，但我使用的是32位XP。在你今天回复之后，我在IE8/64bit/Windows7上尝试了一下，得到了底部的滚动条。所以phooey，它似乎依赖于平台。出于好奇，你在测试什么？
    – 大脑堵塞
    评论 2010年5月4日20:27
  • @cdmckay：我看得更远了，当我将IE8更改为兼容模式或IE7标准模式时，对话框中没有底部滚动条。所以我觉得自己是对的。
    – 大脑堵塞
    评论 2010年5月4日20:39
  • 我正在使用带有IE8标准模式的64位Windows Vista。
    – cdmckay公司
    评论 2010年5月4日20:55
  • @cdmckay：是的，在IE8标准模式下肯定不起作用。你有什么理由用IE7提出最初的问题吗？我觉得这很奇怪。
    – 大脑堵塞
    评论 2010年5月4日21:32
0

您可以按照brianpeiris的建议（为滚动条添加边距）并添加溢出-x:hidden来解决这个问题；将css添加到html元素。这将隐藏水平滚动条。

IE似乎对待模式窗口真的很奇怪，所以大多数正常的想法（javascript窗口调整大小，css固定像素宽度）在“IE模式窗口”中都不起作用

--

此外，只需在showModalDialog调用中添加一个标志，即可完全删除滚动条，而无需更改任何html/cs。

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；'）；”
改进此答案
2
  • 是的，问题是我希望用户能够在需要时垂直和水平滚动（即如果内容太大而无法容纳）。
    – cdmckay公司
    评论 2009年5月11日2:04
  • 我不明白为什么IE设计师决定让模态窗口与常规窗口如此不同？这没有什么意义。为什么不让它成为一个碰巧是模态的常规窗口（通过编程）？
    – cdmckay公司
    评论 2009年5月11日2:04

您的答案

单击“发布您的答案”，表示您同意我们的服务条款并确认您已阅读我们的隐私政策.

不是你想要的答案吗？浏览标记的其他问题或问你自己的问题.