IE的jQuery UI对话问题

StackOverflow https://stackoverflow.com/questions/630984

题

我正在使用新的jQuery 1.3.2和jQuery-ui-1.7库以及UI Dialog。我有一个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';
    }
});
有帮助吗？

解决方案 6

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

其他提示

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

我在我的代码上试了一下，这个URL中的解决方案可以解决问题。

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

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

未能找到另一种解决方法，我开始研究DOCTYPE解决方案。我发现我们网站的DOCTYPE - 虽然它看起来是正确的 - 它实际上将所有浏览器都放入<！>“Quirks Mode <！>”;而且这是问题的真正根源。我怀疑jQuery支持怪癖模式问题所以我怀疑这将永远修复。

我目前的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必须是<!DOCTYPE html>的HTML 5值，而是它必须是有效的DOCTYPE（HTML 4或5 - 不确定XHTML）才能将IE7设置为其他比quirks模式（Firefox无论哪种方式都可以）。参见：

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

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

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

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

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

我没有弄乱doctype。这是在IE8，jQuery 1.4.4和jQuery UI 1.8.9上。

- 要快速发布这个。这在Firefox中打破了它。不理我！

使用字体大小时，我遇到了类似的问题。 font-size：11px - font-size：15px;在CSS中引起了ie9的高度问题。 字体大小：16px的;并且在ie9

中正常工作
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top