在IE8中，jquery-ui的对话框将其内容的高度设置为零。 我怎样才能解决这个问题？

我正在使用jquery UI的对话框小部件在我的Web应用程序中呈现模式对话框。 我通过将所需DOM元素的ID传递给以下函数来完成此操作：

var setupDialog = function (eltId) { $("#" + eltId).dialog({ autoOpen: false, width: 610, minWidth: 610, height: 450, minHeight: 200, modal: true, resizable: false, draggable: false, }); }; 

在Firefox，Safari和Chrome中一切正常。 但是，在IE 8中打开对话框时，只能看到div.ui-dialog-titlebar – div.ui-dialog-contents不是。

问题似乎是在现代浏览器中， div.ui-dialog-contents在其样式中设置了特定的高度，即在打开对话框后，生成的HTML为：

 
... 

在IE8中， height样式属性设置为零，结果HTML为：

 
... 

我需要做什么才能正确设置height （和min-height ）样式属性？

Answer 1

我无法使用IE 8.0.7600.16385IC使用以下测试页重现您的问题。 我很想知道你是如何展示对话框的。 你在调用正确的方法： $(selector).dialog('open'); ？

Answer 2

解决方案是在创建对话框后调用.height（’auto’）。

 $(document).ready(function() { $('#phoneDataButton').click(function() { $('#phoneDataSearchForm').dialog({ modal:true, width: 700, close: function() { $('#phoneSearchResults').html(""); location.reload(true); } }).height('auto') }) }) 

图片来源： http ： //norrisshelton.wordpress.com/2011/10/07/ie8-issues-with-jquery-dialog-causes-box-to-have-wrong-height-and-scrollbars/

为我工作

Answer 3

我发现修复此问题的方法是将其添加到配置中：“autoOpen：false”

然后在文档加载，

 if ($('#DIV_BookingDetails')) { $('#DIV_BookingDetails').dialog('open'); $('#DIV_BookingDetails').height(150); } 

（例如配置高度为200）

Answer 4

在jquery论坛上找到了这个建议，它解决了我的问题（虽然不能令人满意，因为它没有解决底层的bug）。

http://forum.jquery.com/topic/setting-dialog-height-in-ie8-does-not-work

在.ui-dialog .ui-dialog-content类中强制设置高度并包括!important ：

 .ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; height: 300px !important;} 

警告：所有对话框的固定高度; resize不再正常工作。