Question

我正在使用一个完全普通的jQuery滑块，其句柄我使用以下CSS缩小：

html body .ui-slider .ui-slider-handle {
    width: 10px;
}

这具有缩小滑块手柄所需的效果，但是当我尝试拖动它时，它会产生不必要的副作用，使手柄对齐光标左侧的位置。

造成这种情况的原因是什么？如何修改行为？

Answer 1

这是因为.ui-slider .ui-slider-handle在CSS中使用了margin-left。

更改width时，请务必同时更改margin-left。

.ui-slider .ui-slider-handle {
    width: 10px;
    margin-left: -.3em; /*change this*/
}