javascript - Jquery UI Resizable with box-sizing : "border-box" issue

Question

我目前正在使用可调整大小的 Jquery ( http://api.jqueryui.com/resizable/ )

而且我注意到它不能很好地与“box-sizing: border-box;”一起使用。

我已经用谷歌搜索了，但没有得到可靠的答案..(也许我没有花足够的时间..)

有人已经在 js fiddle 上发布了一个与我完全相同的问题示例:

(http://jsfiddle.net/muNjL/)

我不确定这个问题的解决方案是否已经出来......

如果我别无选择，只能不使用边框，请告诉我。我将不胜感激。

感谢您阅读并祝您编码愉快!

-丹尼C

Answer 1

为什么要border-box一切？正常化？

在左侧的 Fiddle 选项下尝试 JSFiddle 的 Normalize CSS。我假设它加载normalize.css .然后删除所有边框声明。您的可调整大小现在应该展开 to the entire width and height of the parent container .

#container {
    width: 300px;
    height: 300px;
    background: #888;
}

#container #ohboxme {
    background: #FFF;
    border: 1px solid grey;
    padding: 10px;
    width: 200px;
    height: 100px;
    font-size: 10px;
}