代码之家 › 专栏 › 技术社区 › brahn

在ie8中,jquery ui的对话框将其内容的高度设置为零。我该怎么解决?

jquery-ui-dialog jquery-ui internet-explorer jquery

brahn · 技术社区 · 15 年前

我正在使用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中,一切正常。但是,在IE8中,当对话框打开时 div.ui-dialog-titlebar 是可见的 div.ui-dialog-contents 不是。

问题似乎是,在现代浏览器中, 分区UI-对话框-内容 在其样式中设置了特定高度,即打开对话框后,生成的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>

我需要做什么才能得到 高度 (和) min-height )样式属性设置正确吗?

4 回复 | 直到 13 年前

Ken Browning 15 年前

我无法使用IE8.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>

Clarence Liu 13 年前

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

为我工作

therocis 14 年前

我发现解决这个问题的方法是将它添加到配置:“autoopen:false”

然后在文件加载时,

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

(例如配置高度为200)

brahn 15 年前

在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;}
注意事项:固定高度对话框;调整大小不再有效适当地。