Firefox 和 IE 中的 jQuery UI 可调整大小的错误（？）

Posted 2023-05-08

【中文标题】Firefox 和 IE 中的 jQuery UI 可调整大小的错误（？）

【英文标题】：jQuery UI resizable bug(?) in Firefox and IE

【发布时间】：2011-10-13 10:35:00

【问题描述】：

我正在为一家公司构建一个 HR 模块，使用具有动态内容的可排序表。完成项目后，客户要求将表格垂直调整大小。我将 jQuery UI resizable() 应用到包含主表的 div 中。它在 Safari 和 Chrome 中工作得非常好，但是在 Firefox 或 IE 中调整包装器 div 的大小时，表格的高度保持不变，并且不会扩展到 div 的尺寸.

简化的标记如下所示：

<div id="list">
    <div class="table-container">
        <table>
            (blablabla, this is a sortable table with clickable th's and about 10 columns)
        </table>
    </div>
</div>

样式是：

#list 
    width: 1150px;
    height: 180px;
    float: left;
    overflow: hidden;
    border: 1px solid #aeaeae;


#list .table-container 
    width: 1145px;
    height: 175px;


#list table 
    width: 100%;
    height: 100%;
    float: left;


#list table td 
    height: 20px;
    vertical-align: middle;

我尝试对每个元素使用各种 overflow、position 和 display 值，但结果并没有好转。 jQuery部分是：

$(document).ready(function() 
    $("#list .table-container").resizable( alsoResize: "#list", handles: "s" );
);

Firefox/IE 真的存在这样的问题，还是我做错了什么？

【问题讨论】：

如果可能的话，在开发环境之外测试这些东西总是有帮助的，比如jsfiddle，您可以在其中分离代码的基本组件，以可能隔离任何问题原因。当我处理动态填充的东西时，我只是用虚拟数据填充它并独立于其他地方的应用程序构建它。我也无法重现这个。

【参考方案1】：

在 Firefox 9.0.1 中测试了您的代码。 找不到问题。

随着 div 大小的调整，表格高度确实发生了变化。

我发现表格可以在 Firefox、IE 和 chrome 上正确调整大小。

我不认为 FF 或 IE 有什么问题。 猜猜你的代码中的其他东西正在影响它。