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

Question

我正在尝试使用 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。

Answer 1

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

如果你希望它的功能相同，你可以使用 outline 代替。

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

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