jQuery UI 可调整大小的手柄不在行的中间

Question

在这个 jsFiddle 中，我有一个 jQuery UI 带手柄的可调整大小的矩形。问题是，当我调整矩形大小时，有时手柄不会留在中间，请看下图，该线将手柄分成 75% 而不是 50%。为什么会发生这种情况以及如何解决？

#elementResizable {
    border: 1px solid #000000;
    width: 300px;
    height: 40px;

}
#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
    width: 6px;
    height: 6px;
    background-color: red;
}
#nwgrip {
    left: -3px;
    top: -3px;
}
#negrip{
     top: -3px;
     right: -3px;
}
#swgrip{
    bottom: -3px;
    left: -3px;
}
#segrip{
     bottom: -3px;
     right:-3px;
}
#ngrip{
     top: -3px;
    left: calc(50% - 3px);
}
#sgrip{
     bottom: -3px;
    left: calc(50% - 3px);
}
#wgrip{
     left:-3px;
     top:calc(50% - 3px);
}
#egrip{
     right:-3px;
     top:calc(50% - 3px);
}


<div id='elementResizable'>
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
</div>


$('#elementResizable').resizable({
    handles: {
        'nw': '#nwgrip',
        'ne': '#negrip',
        'sw': '#swgrip',
        'se': '#segrip',
        'n': '#ngrip',
        'e': '#egrip',
        's': '#sgrip',
        'w': '#wgrip'
    }
});

Answer 1

我怀疑这只是一个渲染/视觉问题。当我检查元素时，我可以看到高度是否为 40 px，South Grip 位于 37 px 的位置。

示例：https://jsfiddle.net/Twisty/u5pv79ga/13/

JavaScript

$('#elementResizable').resizable({
  handles: {
    'nw': '#nwgrip',
    'ne': '#negrip',
    'sw': '#swgrip',
    'se': '#segrip',
    'n': '#ngrip',
    'e': '#egrip',
    's': '#sgrip',
    'w': '#wgrip',
  },
  resize: function(e, ui) {
    $(".log").html("W: " + ui.size.width + ", H: " + ui.size.height + ", L: " + $("#sgrip").offset().left + ", T: " + $("#sgrip").position().top);
  }
});

我确实注意到，有时在调整大小时，手柄会碰到半个像素。这可能会导致所见的细微视觉差异。

jQuery UI 可调整大小的手柄不在行的中间

jQuery UI resizable handles don't stay in the middle of the line

jquery

jquery-ui