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