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

前端之家收集整理的这篇文章主要介绍了JQuery UI Resizable box-sizing:border-box = height bug?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用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:内容框.

解决方法

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

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

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

.test{
    width:200px;
    height: 100px;
    outline:1px solid red;
    Box-sizing: border-Box;
}
原文链接:https://www.f2er.com/jquery/241451.html

猜你在找的jQuery相关文章