Jquery UI 可通过框大小调整大小调整大小："border-box"问题

Question

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

）

我注意到它不适用于"框大小：边框框;"。

我已经用谷歌搜索过了，但无法得到可靠的答案。（也许我没有足够的时间..）

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

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

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

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

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

- 丹尼·

Answer 1

你为什么要border-box所有东西？正常化？

试试JSFiddle在左边的小提琴选项下的规范化CSS。我假设它加载规范化.css。然后删除所有边框声明。可调整大小的容器现在应扩展到父容器的整个宽度和高度。

#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目前最好的解决方案是切换到使用css"大纲"而不是"边框"。本质上，如果你设置了一个边框，那么它会改变jquery的width（）函数返回的值。这意味着可调整大小的小部件认为该框比实际小。