Question

这是一个非常奇怪的问题，无论出于什么原因，滑块手柄在它的父元素之外是它的高度或宽度的一半，为什么它们就这样做了？...

无论如何，你可以在这个小提琴中看到：http://jsfiddle.net/PGLkW/2/句柄超出了它的容器，如果我试图删除这样的边距：

.ui-slider .ui-slider-handle{
    width:100%; 
    margin-left:0px;
    left:0px;
    margin-bottom:0px;
}

事情变得更糟，从我能看到的我真的需要编辑小部件本身就是这样一个愚蠢的事情，或者我没有看到什么？

所以只是为了澄清我的问题，我希望句柄留在它的容器内，当我点击任何地方开始拖动，因为你可以看到鼠标没有完全到达句柄的中间，所以它看起来很糟糕

Answer 1

看起来它没有正确读取css，或者因为有许多解决方案，他们留给开发人员使用它，你必须这样做，直到你得到你想要的结果，这里有使用margin-bottom in negative的解决方案：

//CSS
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-radius: 0; }
.ui-slider .ui-slider-handle{
    width: 58px;
    height: 50px;
    margin-bottom: -25px;
}

//HTML
<div class="slider" style="margin:50px; height:400px; width:50px;"></div>

小提琴http://jsfiddle.net/RFVZ2/。我希望这适合你。

Answer 2

此错误报告中描述了解决方案（“这是设计的”）：http://bugs.jqueryui.com/ticket/4308

对于我使用的水平滑块：

.ui-slider-handle
{
    height: 24px !important;
    margin-bottom: -6px !important;
}

Jquery ui滑块手柄垂直偏移

2 个答案: