滑动到底部背景图像时的垂直滑块被压缩

Question

我使用jquery-ui插件实现垂直滑块功能。我想实现渐变效果，所以我使用背景图片，包括背景/范围和滑动手柄。问题是当我将点句柄滑到底部时，bg 图像被压缩。这是我的示例代码。

jsFiddle

#head_slider .ui-slider-range {
    background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}

#head_slider_bg {
    position: absolute;
    width: 72px;
    height: 704px;
    right: 100px;
    background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}

和水平滑块一样的方法很好！这让我很困惑。感谢您的阅读和帮助。

Answer 1

问题不在于背景图片被压缩，而是应用于竖条的CSS规则border-radius变得不同了。当滑块滑到底部时，垂直条的高度小于60px（你设置的border-radius的值），因此实际的边框半径会减小。

解决此问题的一个简单方法是为该元素添加min-height 约束，您可以参考更新后的fiddle（在CSS 的第79 行添加min-height: 60px）。

有关浏览器句柄border-radius 行为的更多详细信息，请参阅规范中的Cornor Overlap 部分。