FireFox 中 jQuery 可调整大小 UI 的奇怪行为答案

【问题标题】：strange behavior of jQuery resizable UI in FireFoxFireFox 中 jQuery 可调整大小 UI 的奇怪行为
【发布时间】：2012-02-04 14:06:44
【问题描述】：

我有一个分配了可调整大小的 div

当我第一次开始调整它的大小时，它的父div突然变大了，突然出现了两个滚动条

这种现象发生在 FireFox 中，在 safari 和 chrome 中运行良好..

谁能告诉我怎么解决？

更多细节：

我有一个这样的结构：

<body>
<div id="content">
    <div id="noteboard">
        <div id="note"></div>
    </div>
</div>
</body>

记事板是一块和内容一样大的大板，也和文档一样大。

那么，note 是一个可拖动的 div。

但是，当我第一次开始拖动笔记时，内容 div 突然改变了它的大小。

一开始，内容是991*838

当我点击鼠标并移动时，内容的大小变为 976 * 838

#content{
    z-index:0;
    position: relative;
    width: 100%;
}

#noteboard{
    position: relative;
}

#note{
}

note 的 css 是空的，但它具有 jquery-ui 的 ui-draggable 和 ui-resizable 类，我将其设置为可拖动和可调整大小...

【问题讨论】：

只要考虑一下，没有问题的代码/标记/css至少（如果可能的话，还有一个jsfiddle.net 演示并且非常可取），它是很难说，没有猜测。考虑：sscce.org
抱歉..我对此不熟悉....我尝试使用 jsfiddle...但我的问题涉及 jquery-ui，我不知道如何放入 jsfiddle ...
看左边，在jQuery 1.7.1的下拉列表下方：jsfiddle.net/9k9Uc 另外，您可以添加资源（再往下看一点），即, JS 和 CSS 文件。
奇怪....在我在 jsFiddle 中测试了一些示例代码之后......突然 FF 工作正常......
好的...我找到了问题...涉及 CSS3 的框...我的内容显示为框..所以可能会发生一些奇怪的事情...我会调查它.. .

【解决方案1】：

尝试将父级的溢出 CSS 参数设置为隐藏。

例如：

<div id="parent" style="overflow: hidden;"> 
  <div id="resizable"/> 
</div>

【讨论】：