IE7模式對話框滾動條重疊內容

下面是違規代碼。要測試它，請將其保存在名爲「test.html」的文件中，然後單擊左上角的按鈕。IE7模式對話框滾動條重疊內容

<!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模式對話框，我無權改變這一點。

來源

2009-05-01 cdmckay

你能否詳細說明這個基本規則？你想IE7模式對話框工作的任何網址，或只是你的創作的HTML？ HTML限於你在這裏的內容嗎？並且是否允許Javascript？看來，IE模式對話框不同於IE窗口和其他瀏覽器模式對話框，所以我們不能在水上行走。 – brainjam 2010-04-19 00:56:55

@brainjam我當然可以。我控制HTML，除了高度未設置爲2000px（它隨着內容增長）之外，HTML本質上就是我在這裏所做的，它只需要爲模態對話框工作，它需要在IE和Firefox上工作。 JavaScript肯定是允許的。此外，橫向滑塊需要消失，除非寬度比dialogWidth寬。 – cdmckay 2010-04-19 05:50:59

添加20像素的保證金#TEST權，增加對話的寬度：

http://jsbin.com/ujevu

你仍然有一個水平滾動條，但至少內容不模糊。

來源

2009-05-01 18:35:46 brianpeiris

這對我來說不是一個真正的解決方案。我希望它能正常工作。 – cdmckay 2009-05-01 18:39:09

所以你的意思是你想避免水平滾動條？ – brianpeiris 2009-05-01 18:45:23

是的。我不明白它是如何在正常窗口中正常工作，但不能在模態窗口中正常工作。它讓我煩惱。 – cdmckay 2009-05-01 19:06:02

您可以通過做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-10 18:18:28 maxsilver

更改window.showModalDialog選項使用寬度：300px而不是dialogWidth：300px - 水平滾動條消失，垂直滾動條位於邊界的右側。

來源

2009-07-27 09:22:57

正如你所說，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-19 23:47:07 brainjam

IE7模式對話框滾動條重疊內容

回答

相關問題