Question

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

resizable.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>

my.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类（不是选项），则不会出现问题

Answer 1

这似乎是CSS的一个问题。

可调整大小的插件将类ui-resizable添加到您的元素中，默认情况下它在jQuery UI中附带此样式：

.ui-resizable {
    position: relative;
}

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

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

或将.MyDiv定义更改为：

.MyDiv {
    position: absolute !important;
}

Answer 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() };

Answer 3

它应该可以在你的jsfiddle中看到：

HTML

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

JS

$('#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/

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

3 个答案: