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

Question

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

有什么想法吗？

JS代码:

$('.task')    .draggable({        axis: 'x'    })    .resizable({        containment: 'parent',        handles: 'e, w'    });

HTML代码:

<ul>  <li>    <div class="task status-green">      <span class="handle-move"></span>    </div>  </li></ul>

CSS 代码:

li {  height: 20px;  line-height: 20px;  list-style: none;}.task {  height: 16px;  margin-top: 2px;  position: relative;}.task span {  display: block;  height: 16px;  position: absolute;  z-index: 10;}.task .handle-move {  bottom: 0;  cursor: move;  left: 10px;  right: 10px;  top: 0;  z-index:1;}.task .ui-resizable-handle {  background-color: pink;  cursor: e-resize;  height: 16px;  position: absolute;  width: 10px;}.task .ui-resizable-w {  left: 0;}.task .ui-resizable-e {  right: 0;}.status-green {  background-color: green;}

Answer 1

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

box-sizing: border-box; 

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