自定義滑塊手柄對齊光標？

我使用的是完全普通的jQuery的滑塊，其手柄收窄我使用下面的CSS：自定義滑塊手柄對齊光標？

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

這有縮小滑塊手柄的預期效果，但它具有使把手扣的不良副作用當我嘗試拖動時，移動到光標左側的位置。

這是什麼原因造成的？我該如何修改這個行爲？

來源

2013-03-13 Aerovistae

你能提供的jsfiddle？ – Dom 2013-03-13 18:34:08

http://jsfiddle.net/Z7pW3/1/抓住手柄並慢慢拖動它，你會發現移動它時總會被放置在光標的左側，而不是停留在與光標相對的位置單擊。控制拖動的代碼需要警告寬度的變化，但我不知道該怎麼做。 – Aerovistae 2013-03-13 19:10:48

這是因爲.ui-slider .ui-slider-handle在CSS中使用margin-left。

當您更改width時，請務必同時更改margin-left。

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

DEMO： http://jsfiddle.net/dirtyd77/Z7pW3/6/

來源

2013-03-13 19:16:45 Dom

我在CSS上不夠專業，無法理解爲什麼你選擇了px--你能解釋一下嗎？ – Aerovistae 2013-03-13 19:21:54

@Aerovistae不用擔心，這篇文章幫了我：http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/你會注意到大多數jQueryUI CSS使用' em'。 – Dom 2013-03-13 19:22:58

自定義滑塊手柄對齊光標？

回答

相關問題