试图在 IE6 中调整 jQuery 对话框的大小？
Posted
技术标签:
【中文标题】试图在 IE6 中调整 jQuery 对话框的大小？【英文标题】：Trying to resize a jQuery dialog in IE6? 【发布时间】：2010-09-12 05:00:36 【问题描述】：我以为我在 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>
【问题讨论】：
【参考方案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 中引入任何问题。
【讨论】：
这是一个普遍的 hasLayout 问题吗？可以添加 position:relative 或 zoom:1 做同样的事情吗？ 我尝试了 position:relative 和 zoom:1 两种方法，都没有纠正溢出：hidden 之类的问题。【参考方案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 对话框的大小？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery - 对话框自动调整动态内容的大小并保持中心位置
Jquery对话框在打开前调整大小，但对话框以以前的宽度-高度打开
如何强制 jQuery UI 对话框再次重绘或触发某些东西来强制调整大小
jQuery UI 对话框中的 IFrame 有时不会在 Chrome 中加载内容，直到对话框被移动或调整大小（但适用于 FF 和 Edge）