Internet Explorer 中的 jQuery UI 对话框和 maxHeight答案

【问题标题】：jQuery UI Dialog and maxHeight in Internet ExplorerInternet Explorer 中的 jQuery UI 对话框和 maxHeight
【发布时间】：2010-12-21 17:08:37
【问题描述】：

这是我当前的代码：

$("#DialogScroll").dialog({
                bgiframe: true,
                autoOpen: false,
                maxHeight: 600,
                width: 550,
                modal: true,
                resizable: false,
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                },
                close: function () { }
            });

maxHeight 在 Firefox、Chrome 等中效果很好，正如预期的那样，但 IE 7 显然存在问题。有谁知道如何让 UI 对话框在 IE 中使用 maxHeight？

<div id="DialogScroll" class="dialog" style="display:none; ">
        <table>
            <thead>
                <tr>
                    <th>
                        State Code
                    </th>
                    <th>
                        State Name
                    </th>
                </tr>
            </thead>
            <tbody>
                <asp:Literal ID="litStates" runat="server" />
            </tbody>
        </table>
    </div>

【问题讨论】：

到底是什么问题？（我假设它可能比它的 maxHeight 大，但我想确定一下。）你也可以粘贴#DialogScroll 以便我们可以在这里看到它吗？谢谢。
添加了对话框的内容。发生的事情是 maxHeight 设置为 600 并且空白全部消失了，这很好，但我实际上可以设置表（它是 jQuery 数据表插件的一部分）以显示更多记录。假设是 50。这超出了 IE 中的 maxHeight。

标签： javascript jquery jquery-ui jquery-dialog css

【解决方案1】：

看起来这是一个长期存在的open jQueryUI bug - 在此链接中，cmets 中列出了解决方法和补丁。

【讨论】：

【解决方案2】：

Dean 指向的链接最近更新了一个对我有用的解决方法：

此外，您可以通过 'vol7ron' 应用自己的 CSS；类似：

$('#dialog')
   .dialog( { modal : true } )
   .css( { 'max-height' : '50px' } );

因此，在你的情况下：

$("#DialogScroll").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 550,
    modal: true,
    resizable: false,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    },
    close: function () { }
}).css( { 'max-height' : '600px'} );

【讨论】：