我设置了一些样式以使 jQuery 滑块看起来不错。用于 ui-slider-handler 的图像。我在 IE 和谷歌浏览器中工作正常。但它在 Safari 和 Firefox 中无法正常工作。
我试着摆弄它并检查了不同浏览器中摆弄的输出。然后它工作正常。
如果在我的桌面上运行相同的源代码（在浏览器 Safari 和 Firefox 中），我不明白为什么它不起作用。我猜该脚本可能在错误的地方被调用。我尝试在不同的地方调用脚本。
在不同的浏览器中输出 **
**Google Chrome
Firefox
Safari
这是我的代码：
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.vUiSliderWrapper{
overflow:hidden;
}
.vUiSlider{
height:7px;
background-image:-ms-linear-gradient(top, #b9b9b9,#e0e0e0);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType="0",startColorStr="#b9b9b9",endColorStr="#e0e0e0");
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#e0e0e0)) !important;
background: -moz-linear-gradient(top,#b9b9b9,#e0e0e0) !important;
}
.vUiSlider .ui-slider-handle{
border:none;
background:url('http://s14.postimage.org/wo9hknojx/slider_handles.png') 0 -27px no-repeat;
width:20px;
height:17px;
outline: none;
}
.vUiSlider .ui-slider-handle:hover{
background-position:0 -4px;
}
.vUiSlider .ui-slider-range{
border-radius:4px;
background-image:-ms-linear-gradient(top, #04adff,#0083c1);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType="0",startColorStr="#04adff",endColorStr="#0083c1");
background: -webkit-gradient(linear, left top, left bottom, from(#04adff), to(#0083c1)) !important;
background: -moz-linear-gradient(top,#04adff,#0083c1) !important;
}
#sld1 .vUiSlider{
width:200px;
}
</style>
</head>
<body>
<span id="sld1" class="vUiSliderWrapper">
<div class="vUiSlider"></div>
<input type="text" role="data"/>
</span>
<span id="sld2" class="vUiSliderWrapper">
<div class="vUiSlider"></div>
<input type="text" role="data"/>
</span>
<script>
$(document).ready(function(){
$('.vUiSliderWrapper .vUiSlider').slider({
range: "min",
min:0,
max:100,
value:3,
animate: true,
slide:function(event, ui){
$(this).siblings('input[role="data"]').val(ui.value);
}
});
});
</script>
</body>
</html>