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

Question

我正在尝试使用box-sizing来调整DIV的大小:border-box; 即使我只允许调整宽度,每次调整大小事件停止时(高度更改),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:内容框.

Answer 1

我不知道为什么会这样,但看起来你的border财产就是问题所在.

如果您希望它的功能相同,则可以使用outline.

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

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