0

我构建了一个简单的 jsfiddle 来演示我的问题：http: //jsfiddle.net/9MD43/

在 Chrome 上调整框的大小使框保持绿色，这就是我想要的。尝试在 Firefox 上调整盒子的大小会导致盒子变成红色，因为弹性盒子缩小到没有。Internet Explorer 10 的行为与 Chrome 类似，并将框保持为绿色（此示例中未显示）。

可以通过从脚本中删除 .draggable 命令来缓解该问题：

$("#outer").resizable().draggable(); // <-- removing .draggable() will keep the box green in Firefox after resizing

标记很简单，没什么花哨的：

<div id="outer">
    <div id="content">
        <div id="list">
        </div>
    </div>
</div>

“#outer”是弹性框，“#content”的弹性为 1。

“#content”是相对定位的，“#list”是绝对定位在其中的。在我的应用程序的完整版本中，我将项目动态添加到“#list”div 并应用了溢出：滚动，这就是为什么 CSS 在这个简单示例中看起来不寻常的原因。

这是 jquery 的 .draggable 和/或 Firefox 中的错误，是否有针对此问题的干净解决方法？

[编辑] 一个更简单的例子：http: //jsfiddle.net/LXmuL/

调整框的大小会在 Firefox 上折叠 flex，但在 Chrome 上不会。这可以通过盒子的背景颜色来观察。

4

1 回答 1

0

我发现了这个错误。

jquery 将绝对定位添加到可拖动元素。Firefox 在弹性框和绝对定位方面存在一个长期存在的错误：https ://bugzilla.mozilla.org/show_bug.cgi?id=579776 。实际上，在我的示例中，将外框的位置设置为绝对位置就足以折叠 flex 框。

于 2013-03-29T04:18:12.227 回答