3

我以为我在 jQuery 网站上看到过关于此的错误报告，但现在我找不到它。我正在尝试在 IE6 中调整对话框的大小。但是当元素调整大小时，内容和标题栏不会缩小。但是，如果对话框变大，它们会调整大小。结果是关闭按钮最终被切断，并且如果用户将对话框的大小调整为更小，内容将被剪裁。

我已经尝试处理 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>
4

2 回答 2

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 中引入任何问题。

于 2008-09-24T21:29:39.393 回答
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>
于 2008-09-23T09:31:54.150 回答