jquery - 为什么jqueryui.dialog选中的元素是表格时会忽略height参数？

Question

当我尝试渲染 <table> 时作为对话窗口，我的 height:750参数似乎被忽略了；高度超过 2100 像素的内容强制对话框以相同高度呈现，使整个页面滚动:(example)

此外，这是一个 $("table").dialog()在表格比参数短的地方调用。在此示例中，对话框缩小高度以匹配表格单元格内容，再次忽略 750 高度参数。 (example)

解决方法:

在 <div> 中渲染表格标签似乎消除了这个问题，但感觉相当笨拙:

Short table + Tall text wrapped in div

Long table wrapped in div

此外，这是我的解决方法，我呈现一个空对话框，然后将表格作为 open() 的一部分拉入窗口中回调:

After-render workaround

这种行为不一致是错误还是设计使然？

Answer 1

在初始化期间不考虑高度选项而打开表格对话框似乎不是设计使然。我的经验是 jQuery UI 组件的行为最一致地包装为 <div>元素，看起来您找到了相同的结果，但正如您所说，这不应该是一项要求。

dialog() 的高度选项的默认值为 auto ，它应该缩放对话框以适应元素。 table 时可能存在错误元素传递给 dialog()导致 auto在初始化时覆盖高度选项。我尝试在您的第一个示例和 dialog() 中更改宽度值通过更改宽度可以正确响应，但高度不会改变。我还对选项进行了重新排序，因此高度排在第一位，但这也没有效果。

JS Bin 对我来说效果不佳，所以我将您的代码移至此 fiddle 并压缩了对话框初始化调用。 https://jsfiddle.net/z601hhjd/

// Open dialog and set height and width on init
// Width option works at initialization but height does not
$(".shortTable").dialog({
     'height':'300',
     'width':'500',
     open: function(event, ui) {
         // Height setter has no effect after init either
         $(this).dialog("option", "height", 200 );

         // Width setter works after initialization too
         $(this).dialog("option", "width", 200 );
     }
});

在 jQuery UI 中似乎有一个错误，用于在 table 上设置高度与 documentation 冲突的元素但正如@Peri 所说，此功能与 HTML 规范一致。