IE7模態對話框滾動條重疊內容
[英]IE7 modal dialog scrollbars overlap content
問題描述
這是有問題的代碼。 要測試它，請將其保存在名為“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 個解決方案
解決方案1
3 2009-07-27 09:22:57
更改window.showModalDialog選項以使用width：300px而不是dialogWidth：300px - 水平滾動條消失，垂直滾動條位於邊距右側。
解決方案2
1 2010-04-19 23:47:07
正如您所提到的，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。 希望這對你有用。
解決方案3
1 2009-05-01 18:35:46
解決方案4
0 2009-05-10 18:18:28
您可以通過執行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 模態對話框 - 定位錯誤？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.