jQuery UI：在Firefox中拖动时可拖动的父轮廓更改

Question

我在父div中有一个可拖动的元素。父母有一个CSS大纲。在Firefox中，父项的轮廓在拖动子元素时更改大小。轮廓展开，因此它始终包含可拖动元素。在Chrome和IE中，父div轮廓不会更改，并且子元素可以从轮廓中拖出。

以下是一个例子：http://jsfiddle.net/knn2s8xs/1/

HTML：

<div id="container">
    <div id=draggable>Drag Me!</div>
</div>

CSS：

#container {
    width: 100px;
    height: 100px;
    outline: 3px solid red;
    margin: 100px;
}

#draggable {
    width: 100%;
    height: 100%;
    background-color: blue;
    color: white;
}

JS：

jQuery('#draggable').draggable({
    revert: true
});

有没有办法在Firefox和Chrome和IE中获得相同的行为？

Answer 1

使用解决问题的border: 3px solid red;！