2008-09-22 146 views
1

我以爲我在jQuery網站上看到過關於這個錯誤的報告,但現在我找不到它。我正試圖在IE6中調整對話框的大小。但是,當元素被調整大小時,內容和標題欄不會調整大小。但是,如果對話框變大,他們將調整大小。結果是關閉按鈕最終被切斷,並且如果用戶將對話框調整爲較小,則剪輯內容。試圖在IE6中調整jQuery對話框的大小?

我試過處理resizeStop事件並手動調整內容和標題欄的大小,但這可以給我奇怪的結果。內容區域中元素的大小和位置仍然不變。另外,即使我調整標題欄的大小,關閉按鈕仍然不會回到視圖中。有任何想法嗎?如果這是jQuery-ui中的錯誤,是否有人知道一個好的解決方法?

<html> 
<head> 
    <title>Example of IE6 resize issue</title> 
    <link rel="stylesheet" type="text/css" href="http://ui.jquery.com/repository/latest/themes/flora/flora.all.css" /> 
    <script src="http://www.google.com/jsapi"></script> 
    <script>   
    google.load("jquery", "1");   
    google.load("jqueryui", "1");   
    google.setOnLoadCallback(  
    function() {     
     $(document).ready(function()   
     {    
     $("#main-dialog").dialog();   
     });  
    }); 
    </script> 
</head> 
<body> 
    <div id="main-dialog">  
     This is just some simple content that will fill the dialog. This example is  
     sufficient to reproduce the problem in IE6. It does not seem to occur in IE7  
     or FF. I haven't tried with Opera or Safari. 
    </div> 
</body> 
</html> 

回答

2

我能夠想出一個解決方案。如果您將樣式overflow:hidden添加到對話框容器div元素(其中已應用css類.ui-dialog-container),則所有內容都將正確調整大小。我所做的只是添加CSS規則如下的植物主題:

.ui-dialog .ui-dialog-container { 
    overflow: hidden; 
} 

它也通過執行糾正如下:

if ($.browser.msie && $.browser.version == 6) 
{ 
    $(".ui-dialog-container").css({ overflow: 'hidden' }); 
}  

這糾正我看到的問題IE6下,有沒有在FireFox中引入任何問題。

+0

這是一個普遍的hasLayout問題?可以添加位置:相對或縮放:1做同樣的事情? – 2008-09-24 23:00:10

0

css可能是一個因素。你能否改變你的例子,以便我們可以看到你的樣式表?我更新了示例,以便它不依賴於本地擁有jQuery。

<html> 
<head> 
<title>Example of IE6 resize issue</title> 
<link rel="stylesheet" type="text/css" href="?.css" /> 
<script src="http://www.google.com/jsapi"></script> 
<script> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 

    google.setOnLoadCallback(
    function() { 
     $(document).ready(function() 
     { 
      $("#main-dialog").dialog(); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div id="main-dialog"> 
    This is just some simple content that will fill the dialog. This example is 
    sufficient to reproduce the problem in IE6. It does not seem to occur in IE7 
    or FF. I haven't tried with Opera or Safari. 
</div> 
</body> 
</html>