自定义滑块手柄捕捉到光标？

【问题标题】：Customized slider handle snapping to cursor?自定义滑块手柄捕捉到光标？
【发布时间】：2013-03-13 18:07:48
【问题描述】：

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

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

这具有缩小滑块手柄的预期效果，但是当我尝试拖动它时，它具有使手柄捕捉到光标左侧位置的不良副作用。

是什么原因造成的，我该如何修改这种行为？

【问题讨论】：

能提供jsfiddle吗？
jsfiddle.net/Z7pW3/1 抓住手柄并慢慢拖动它，您会看到在移动时它始终会定位在光标的左侧，而不是停留在相对于点击的位置。控制拖动的代码需要提醒宽度变化，但我不知道该怎么做。

【解决方案1】：

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

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

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

【讨论】：

我在 CSS 方面不够专业，无法理解您为什么选择 em 而不是 px——您能解释一下吗？
@Aerovistae 不用担心，这篇文章帮助了我：kyleschaeffer.com/user-experience/… 你会注意到大多数 jQueryUI CSS 使用em。