定制jQuery滑块，在不同浏览器中提供奇怪的输出_Jquery_Slider

定制jQuery滑块，在不同浏览器中提供奇怪的输出

jquery

定制jQuery滑块，在不同浏览器中提供奇怪的输出,jquery,slider,Jquery,Slider,我设置了一些样式以使jQuery滑块看起来很漂亮。用于ui滑块处理程序的图像。我在IE和谷歌chrome上工作得很好。但是它在Safari和Firefox中不能正常工作。我试着使用它，并在不同的浏览器中检查了fiddle输出。然后它就可以正常工作了我不明白，如果在我的桌面上运行相同的源代码，为什么它不起作用。我想可能是在错误的地方调用了该脚本。不过，我尝试在不同的地方调用该脚本。在不同浏览器中输出** **谷歌浏览器火狐游猎这是我的密码： <!DOCTYPE HTML

我设置了一些样式以使jQuery滑块看起来很漂亮。用于ui滑块处理程序的图像。我在IE和谷歌chrome上工作得很好。但是它在Safari和Firefox中不能正常工作。我试着使用它，并在不同的浏览器中检查了fiddle输出。然后它就可以正常工作了

我不明白，如果在我的桌面上运行相同的源代码，为什么它不起作用。我想可能是在错误的地方调用了该脚本。不过，我尝试在不同的地方调用该脚本。在不同浏览器中输出** **谷歌浏览器火狐游猎这是我的密码：

    <!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>

我可以通过用新版本文件替换脚本和样式表来解决这个问题。但我仍然想知道，如果文件是旧版本，它怎么能在IE和谷歌Chrome中工作呢