Question

我以为我在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>

Answer 1

我能够想出一个解决方案。如果将 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中引入任何问题。

Answer 2

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>

试图在IE6中调整jQuery对话框的大小？

2 个答案: