javascript - jQuery 用户界面 : Draggable parent outline changes while dragging in 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;解决了问题!