jQuery UI resizable 在调整宽度时改变高度

Question

我有一个非常简单的 DIV 元素，我正在尝试调整其大小并水平拖动。它工作正常，但 DIV 元素的高度也由 jQuery UI 更改。我不明白为什么。

谁有想法？

JS代码：

$('.task') .draggable({ 轴：'x' }) .resizable({ 遏制：'父母'， 句柄：'e，w' });

HTML 代码：

CSS 代码：

李{ 高度：20px； 行高：20px； 列表样式：无； } 。任务 { 高度：16px； 边距顶部：2px； 位置：相对； } .任务跨度{ 显示：块； 高度：16px； 位置：绝对； z 指数：10； } .task .handle-move { 底部：0； 光标：移动； 左：10px； 右：10px； 顶部：0； z-索引：1； } .task .ui-resizable-handle { 背景颜色：粉红色； 光标：电子调整大小； 高度：16px； 位置：绝对； 宽度：10px； } .task .ui-resizable-w { 左：0； } .task .ui-resizable-e { 右：0； } .status-绿色{ 背景颜色：绿色； }

Answer 1

根据我的经验，resizable-function 无法尝试管理“box-sizing”css 属性。尝试使用

box-sizing: border-box; 

或为填充物制作一个内部容器。