可调整框大小的Jquery UI："border-box“问题

Question

我目前使用的是Jquery resizable ( http://api.jqueryui.com/resizable/ )

我注意到它不能很好地与"box-sizing: border-box;“一起工作。

我已经用谷歌搜索过了，找不到确切的答案。(也许我花的时间还不够。)

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

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

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

如果我没有选择，只能不使用边框，请让我知道。我会非常感激的。

感谢您的阅读和愉快的编码！

-Danny C

Answer 1

为什么你要border-box所有的东西？规范化？

在左边的Fiddle选项下，尝试JSFiddle的Normalize。我假设它加载了normalize.css。然后删除所有的边框声明。你的resizable现在应该展开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;
}

Answer 2

这是一个已知的错误与jqueryui可调整大小...现在最好的解决方案是使用http://bugs.jqueryui.com/ticket/8932 'outline‘而不是'border’。从本质上讲，如果您设置了一个边框，那么它会更改jquery的width()函数返回的值。这意味着可调整大小的小部件认为框比实际小。