我正在尝试使用box-sizing调整DIV的大小:border-box;
即使我只允许调整宽度,但每次调整大小事件停止(高度更改)时,DIV都会缩小。

我的CSS

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

}

Java脚本
$(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。

最佳答案

我不知道为什么会这样,但是看来您的border属性是问题所在。

如果您希望它具有相同的功能,则可以改为使用outline

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

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

10-05 20:55
查看更多