使用内联块元素调整大小的JQuery UI会导致父级在chrome中奇怪地移动

Question

我正在尝试制作一个布局，我的用户可以调整显示内联块的div。这有点难以解释，但我会试一试。当你调整第一个元素的大小并导致兄弟姐妹被包裹时，然后一旦继续调整第一个元素的高度，父母就开始向下移动页面。如果你然后打开开发人员工具，只需切换溢出：隐藏到关闭然后在元素上将自己定位在适当的位置。

<div class="canvas">
    <div class="resize" style="width: 300px; height: 250px;">
      <div class="resize"></div>
      <div class="resize"></div>
    </div>
</div>


.resize{
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #BBB;
    overflow: hidden;
}

重现的步骤 http://jsfiddle.net/6jHT3/5/

1. 确保您使用chrome
2. 调整首先显示的div的高度和宽度。继续调整大小，直到第二个包裹的div，然后继续调整高度
3. 请注意父div向下移动。
4. 点击修复溢出。这只是将溢出切换为自动然后隐藏
5. 请注意，家长会回到您希望的位置

编辑： 另外我需要父进程溢出：auto或overflow：hidden

这里有任何想法。我只注意到这种情况发生在chrome中。我测试了firefox和IE10，它似乎在那里工作正常。

Answer 1

我为父div添加了一个新的css类

.resize2{      
    display: inline-block;
    vertical-align: top;
    border: 1px solid #BBB;
    }

我创造了一个小提琴

http://jsfiddle.net/kw6wz/

请告诉您是否符合要求。

Answer 2

user3260861帮助我在这里得出结论。设置高度和宽度似乎导致问题。因为我仍然需要父级可调整大小，所以我所做的是将父级的max-height和min-height设置为调整大小开始时的高度。调整大小停止后，我将高度和宽度恢复为原始值。

http://jsfiddle.net/6jHT3/7/

var startResize = function(e){
    var $this = $(this),
        $parent = $this.parent(),
        pHeight,
        pWidth;

    if ( $parent && $parent.length ){
        pHeight = $parent.height();
        pWidth = $parent.width();

        $parent.css({
            'max-width': pWidth,
            'min-width': pWidth,
            'max-height': pHeight,
            'min-height': pHeight,
            'height': 'auto',
            'width': 'auto'
        });
    }

};

var stopResize = function(){
    var $this = $(this);
        $parent = $this.parent(),
        width = $parent.css('max-width'),
        height = $parent.css('max-height');

    $parent.css({
        'max-width': 'none',
        'min-width': 0,
        'max-height': 'none',
        'min-height': 0,
        'height': height,
        'width': width
    });

};

$('.resize').resizable({
    start: startResize,
    stop: stopResize
});