Question

我正在使用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为：

<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
     style="width: auto; min-height: 198px; height: 448px">...</div>

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

<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
     style="min-height: 0px; width: auto; height: 0px">...</div>

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

Answer 1

解决方案是在创建对话框后调用.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 2

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {

            var setupDialog = function(eltId) {
                $('<h1>hello world!</h1>').dialog({
                    autoOpen: true,
                    width: 610,
                    minWidth: 610,
                    height: 450,
                    minHeight: 200,
                    modal: true,
                    resizable: false,
                    draggable: false
                });
            };
            setupDialog();
        });
    </script>
</head>
<body>

</body>
</html>

Answer 3

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

然后在文档加载上，

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

（例如配置高度为200）

Answer 4

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

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;}
警告：所有人的固定高度对话;调整大小不再有效正常。

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

4 个答案: