Question

我设置了一些样式，使jQuery滑块看起来很漂亮。用于ui-slider-handler的图像。我在IE和谷歌Chrome中工作得很好。但它在Safari和Firefox中无法正常工作我尝试fiddle它并检查了不同浏览器中的小提琴输出。它工作正常。

我不明白为什么如果在我的桌面上运行相同的源代码（在浏览器Safari和Firefox中）它不起作用。我猜这个脚本可能在错误的地方调用。我试图在不同的地方调用脚本虽然。
不同浏览器的输出**
**谷歌浏览器 enter image description here 的火狐的 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>

Answer 1

我可以使用新版本文件替换script和styles sheet来解决此问题。但我仍然想知道如果文件是旧版本，它在IE和Google Chrome中是如何工作的。

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

1 个答案: