jquery ui 可调整大小的奇怪错误答案

【问题标题】：weird bug with jquery ui resizablejquery ui 可调整大小的奇怪错误
【发布时间】：2013-07-23 20:26:27
【问题描述】：

我在玩 jquery UI，发现一个奇怪的错误。当我单击使 div 可调整大小的按钮时，div 会移动到该按钮下方的位置。

可调整大小的.html：

<html>
    <head>
        <link href="my.css" rel="stylesheet" type="text/css"/>
        <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script>
        function makeResizable() {
            $("#divRes").resizable();
        }
        </script>
        <style>
        </style>
</head>
<body>
        <br><br><br><br><br><br><br><br><br><br>
        <button onclick="makeResizable();">Make Resizable</button>
        <div id="divRes" class="MyDiv"></div>
</body>
</html>

我的.css：

.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

所以只要我点击了 make resizable 按钮，div 就会变得可调整大小，但它也会在按钮下方垂直移动。

奇怪的部分是这样的：如果我从 my.css 中删除 css 并将其内联放置在

<style>
.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}
</style>

或者，如果我将 div 的声明更改为：

<div id="divRes" class="MyDiv"></div>

到

<div id="divRes"></div>

和 my.css 到

#divRes {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

问题没有发生。

当然，这样做既不受欢迎又愚蠢。该问题无法在 jsfiddle 中重现，因为显然所有 css 都是内联的。如果需要，我可以在线上传两个版本的文件。

jquery 版本：

jQuery UI - v1.8.20 - 2012-04-30

jQuery v1.7.2 jquery.com | jquery.org/license

提前感谢您的任何意见。

编辑：刚刚使用 jquery-ui 1.30.3 和 jquery 1.9.1（最新）对其进行了测试。问题仍然存在，所以不是旧版本造成的。

EDIT2：我已将文件上传至http://speedy.sh/eBPea/resizable.zip

resizable.htm：演示问题

resizable2.htm：如果我不使用 CSS 类（不是选项），问题不会出现

resizable3.htm：如果我在 html 文件中包含 CSS 类（不是选项），问题不会出现

【问题讨论】：

不是很明显，但是您的 HTML 文件中有 DOCTYPE 声明吗？您在此处的代码示例缺少它。
您应该可以在jsfiddle.net 中重新创建，只需将您的 CSS 文件和 JS 文件的 URL 放在外部资源中

标签： jquery html css jquery-ui resizable

【解决方案1】：

这似乎是 CSS 的问题。

可调整大小的插件将 ui-resizable 类添加到您的元素中，它在 jQuery UI 中默认带有这种样式：

.ui-resizable {
    position: relative;
}

这会导致问题，因为您的 CSS 具有 position: absolute 并被覆盖。为防止出现此问题，请将此规则添加到您的 CSS 文件中：

.MyDiv.ui-resizable {
    position: absolute;
}

或将.MyDiv 定义更改为：

.MyDiv {
    position: absolute !important;
}

【讨论】：

听起来很合理。 .ui-resizable 和.MyDiv 具有相同的特异性，因此声明顺序决定获胜者。由于jquery-ui.css 被添加after my.css，.ui-resizable 来after .MyDiv 并因此获胜，从而产生相对定位。如果样式声明放在（内联）jquery-ui.css（声明顺序）之后，或者规则使用 ID 而不是类（更高的特异性），.MyDiv 获胜。

【解决方案2】：

我遇到了同样的问题。没有一个答案对我有用。

我的 div 的宽度从 200px 开始，当我将鼠标从东移到调整大小时，宽度立即下降到 170px。我将问题追溯到第 302 和 303 行在resizable.js 中将el.width() 更改为el.outerWidth()

行：

this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() } : { width: el.outerWidth(), height: el.height() };
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.outerWidth(), height: el.height() };

【讨论】：

【解决方案3】：

它应该像你在这个 jsfiddle 中看到的那样工作：

HTML

<button id="resizeBtn">Make Resizable</button>
<div id="divRes" class="MyDiv"></div>

$('#resizeBtn').click(function() {    
    $("#divRes").resizable();
});

CSS

.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

http://jsfiddle.net/GfczQ/

【讨论】：

该问题无法在 jsfiddle 中复制，只能使用真实文件。