26

我正在使用新的 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';
    }
});
4

6 回答 6

30

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

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

于 2010-09-17T20:10:13.827 回答
19

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

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

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

我目前的文档类型：

<!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 设置为 quirks 模式以外的其他东西（Firefox 工作无论哪种方式都可以）。看：

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

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

于 2011-03-28T16:28:36.087 回答
4

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

于 2010-09-17T17:47:59.040 回答
0

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

于 2009-03-11T17:58:17.793 回答
0

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

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

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

——要快点发这个。这在 Firefox 中打破了它。不理我！

于 2011-03-04T17:27:33.637 回答
0

以像素为单位使用字体大小时，我遇到了类似的问题。字体大小：11px - 字体大小：15px；在 css 中导致了 ie9 中的高度问题。字体大小：16px；和 up 在 ie9 中工作正常

于 2011-11-24T17:14:19.270 回答