尝试在IE6中调整jQuery对话框的大小？
时间：2020-03-06 14:34:20 来源:igfitidea点击:
我以为我在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>
解决方案
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>
我能够提出一个解决方案。如果在对话框容器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中没有引入任何问题。
