當調整寬度時，jQuery UI可調整大小改變高度

Question

我有一個非常簡單的DIV元素，我嘗試調整其大小並水平拖動。它工作正常，但DIV元素的高度也由jQuery UI改變。我不明白爲什麼。

任何想法？

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

從我的經驗，調整大小功能失敗試圖管理「框上漿「CSS屬性。嘗試使用

box-sizing: border-box; 

或製作填充內容器。