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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了试图在IE6中调整jQuery对话框的大小?相关的知识,希望对你有一定的参考价值。

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

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

另一答案

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对话框的大小?的主要内容,如果未能解决你的问题,请参考以下文章

Jquery对话框在打开前调整大小,但对话框以以前的宽度-高度打开

如何强制 jQuery UI 对话框再次重绘或触发某些东西来强制调整大小

重新打开时 JQuery UI 对话框没有正确调整大小?

用JS调整jquery UI对话框的大小?

jQuery - 对话框自动调整动态内容的大小并保持中心位置

jQuery UI 对话框中的 IFrame 有时不会在 Chrome 中加载内容,直到对话框被移动或调整大小(但适用于 FF 和 Edge)