JQuery UI Resizable + box-sizing:border-box = height bug？答案

【问题标题】：JQuery UI Resizable + box-sizing: border-box = height bug?JQuery UI Resizable + box-sizing:border-box = height bug？
【发布时间】：2013-08-20 20:18:50
【问题描述】：

我正在尝试使用 box-sizing:border-box; 调整 DIV 的大小尽管我只允许调整宽度，但每次调整大小事件停止（高度变化）时，DIV 都会缩小。

我的 CSS

.test{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;

}

Javascript

$(document).ready(function() {
    $('.test').resizable({handles: 'e', stop: function(event, ui){
        $('.wdt').text(ui.size.height);
    }});
});

HTML

<div class="test">
    Test
</div>
<br/>
<br/>
<span>Height =</span>
<span class='wdt'></span>

调整它的大小，你会看到。

有人可以帮助我吗？ JSFiddle：http://jsfiddle.net/WuQtw/4/

我尝试了 jquery 1.8.x.. 1.9.x... 没有任何变化。我不能使用 box-sizing: content-box。

【问题讨论】：

标签： jquery html css resizable

【解决方案1】：

我不知道为什么会这样，但您的 border 属性似乎是问题所在。

如果你想让它发挥同样的作用，你可以改用outline。

http://jsfiddle.net/WuQtw/10/

.test{
    width:200px;
    height: 100px;
    outline:1px solid red;
    box-sizing: border-box;
}

【讨论】：

如果元素上有填充，这将不起作用。该问题与 Jquery UI Resizable 计算元素宽度的方式有关。 bugs.jqueryui.com/ticket/8932
很高兴知道，谢谢！

【解决方案2】：

我刚刚发现了同样的问题并构建了这个 sn-p - 可能对某人有所帮助。

// initiate correction
var iHeightCorrection = 0;

var oElement = $('#elementToResize');

// init resize
oElement.resizable({
        handles: 's',
        minHeight: 30,
        // on start of resize
        start: function(event, ui) {
            // calculate correction
            iHeightCorrection = $(oElement).outerHeight() - $(oElement).height();
        },
        // on resize
        resize: function(event, ui) {
            // manual correction
            ui.size.height += iHeightCorrection;
        },
        // on stop of resize
        stop: function(event, ui) {
            // reset correction
            iHeightCorrection = 0;
        }
    });

Fiddle

【讨论】：

完美运行...我没有在开始事件上定义更正，而是在每次调用的调整大小时计算它： const correction = $(ui.element).outerHeight() - $(ui .element).height();

【解决方案3】：

这是你要找的宝贝吗？

只需等待一年将 jquery 更新到 2.0.2

然后就可以了

http://jsfiddle.net/WuQtw/37/

//it worked on jsfiddle using  jQuery UI 1.10.3
$(document).ready(function() {
  
    $('.test').resizable({ 
      
      stop: function(event, ui){
        
        $('.wdt').text(ui.size.height);
        
    }});
});

.test{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="test">
      Test
</div>
<br/>
<br/>
<span>Height =</span>
<span class='wdt'></span>

【讨论】：

【解决方案4】：

我通过包装元素解决了类似问题。使用边框为 0 的 div 来包裹原始元素。

.wrapperDiv {
    position:absolute; 
    height:100px; 
    width:100px; 
    border: 0px;
}

.innerDiv{
    height:100%; 
    width:100%;
    background-color:rgba(0,0,0,0);
    border: 3px solid gold;
    border-radius: 5px;
    box-sizing: border-box
}
...
var tSelectionDiv = $('<div class="wrapperDiv"><div class="innerDiv"></div></div>');
...
tSelectionDiv.resizable({
    handles: 'e, w', 
    containment:someContainerElement
});

【讨论】：