IE 的 jQuery UI 对话框问题答案

【问题标题】：jQuery UI Dialog Issue With IEIE 的 jQuery UI 对话框问题
【发布时间】：2009-03-10 16:07:23
【问题描述】：

我正在使用新的 jQuery 1.3.2 和 jQuery-ui-1.7 库以及 UI 对话框。我有一个 div 标签，里面有几个表单元素（文本框、复选框等）。页面加载后，jQuery 将 div 显示为对话框。这在 FF 中工作得非常好，但在 IE 中，div 的高度是错误的。它只是显示标题栏的一些内容。我在创建 div 时明确设置了高度。如果我在打开对话框后设置了高度选项，高度会被纠正，但内容是空白的（显示文本框的前三分之一）。如果我允许调整对话框的大小，如果你在 IE 中调整它的大小，它可以正常工作，但我不想强迫 IE 用户调整大小只是为了查看内容。有任何想法吗？这是我用来创建对话框的代码：

$('#dialogDiv').dialog({ 
    bgiframe: true, 
    height: 400, 
    width: 620, 
    modal: true, 
    draggable: true, 
    resizable: false, 
    close: function(event, ui) {
        if($('#agree').val() != '1')
            location.href = 'somepage.html';
    }
});

【问题讨论】：

标签： internet-explorer jquery-ui modal-dialog

【解决方案1】：

在进行了一些谷歌搜索后，我找到了问题的真正答案。它是由不兼容的 Doctype 引起的。请转至http://osdir.com/ml/jquery-ui/2009-08/msg00388.html了解更多信息。

我在我的代码上试过了，这个 URL 中的解决方案确实解决了问题。

【讨论】：

这是问题的真正答案。我也遇到过同样的问题，实际上包含 DOCTYPE 确实解决了 jQuery 的一些样式问题。
非常感谢。这确实解决了问题。 IE 很烂

【解决方案2】：

我在 IE7 中遇到了同样的问题，并深入研究了症状和解决方案。我注意到，当我创建一个没有内容的虚拟对话框时，高度会正确呈现。因此，我开始尝试各种类型的内容，看看我是否可以用不同的方式编写内容来克服这个问题。没运气。然而，我确实发现，我添加的内容越多，仅在 IE7 中的对话框就越短（即使是隐藏项也会缩短一点）。因此，简单的内容可能不会产生太大的影响（因此，在这个问题上没有更多的抱怨）。我添加的表格和许多表单项产生了非常明显的效果。

将高度设置为 auto 效果不错，但 IE7 仍然将我的内容的高度误算了大约 10 个像素，太短了（可能是对象上的填充高度），因此 jQuery 添加了滚动条。不完美，但可以接受以下内容。

由于找不到其他解决方法，我开始研究 DOCTYPE 解决方案。我发现我们网站的 DOCTYPE——虽然看起来是正确的——它实际上将所有浏览器都置于“Quirks Mode”，这是问题的真正根源。我怀疑 jQuery 是否支持 quirks 模式问题，所以我怀疑这将永远得到解决。

我目前的 DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

应该是什么：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

即使是这个较旧的 DOCTYPE 也有效：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

因此，并不是说 DOCTYPE 必须是 HTML 5 值<!DOCTYPE html>，而是它必须是有效的 DOCTYPE（HTML 4 或 5——不确定 XHTML）会将 IE7 设置为其他值比怪癖模式（Firefox 可以正常工作）。见：

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

我无法更改我们网站的 DOCTYPE，因此我必须使用其他解决方案，例如自动高度。我注意到在使用 jQuery 对话框时，怪癖和标准模式之间还有其他差异，因此我也必须处理这些差异（即，IE7 和 Firefox 中字体大小百分比的累积方式不同）。

【讨论】：

【解决方案3】：

我也遇到了同样的问题。是的，通过不指定高度，IE 会调整对话框的大小并显示其内容。但是，我不希望模式对话框随着内容变长而不断增长。理想的情况是显示具有指定高度的对话框，用户可以使用滚动条查看内容。这在 FireFox 中完美运行。谁有IE的解决方案？

【讨论】：

【解决方案4】：

我可以通过在高度上给出一个单位来解决这个问题：

$(id).dialog({ modal: true, height: h + "px", width: w });

我不必弄乱文档类型。这是在 IE8、jQuery 1.4.4 和 jQuery UI 1.8.9 上。

--要快点发这个。这在 Firefox 中打破了它。无视我！

【讨论】：

【解决方案5】：

我在使用以像素为单位的字体大小时遇到了类似的问题。字体大小：11px - 字体大小：15px；在 css 中导致了 ie9 中的高度问题。字体大小：16px；及以上在 ie9 中运行良好

【讨论】：

【解决方案6】：

我已经回答了我自己的问题。我只需要使用对话框的高度属性和对话框中的一些元素。好叫我！

【讨论】：

这没有回答问题。
我不得不调整 div 标签中一些文本框的大小，这些文本框充当我的对话框，并删除了我的 jquery 代码中的 height 属性。如果其他人能够根据我自己的回答解决他们的问题，我认为它确实回答了这个问题。
我可以确认没有在传递给 dialog({...}) 的对象中指定 height 属性使其在 IE 中工作。我不知道为什么。
不指定 height 属性也对我有用。这在 IE 中没有发生在我身上。我们在对话框周围添加了一些 HTML 代码 - 我相信这个添加中有一些东西导致了这种行为。
为什么不将此作为问题的评论而不是答案部分？