定製的jQuery滑塊給不同的瀏覽器輸出奇怪的結果

我設置了一些樣式，使jQuery滑塊看起來不錯。用於UI滑塊處理程序的圖像。我在IE和谷歌瀏覽器中工作正常。但它在Safari和Firefox中無法正常工作。
我試圖fiddle它，並檢查在不同的瀏覽器中的小提琴輸出。它工作得很好。
定製的jQuery滑塊給不同的瀏覽器輸出奇怪的結果

我不明白爲什麼它不起作用，如果相同的源代碼運行在我的桌面上（在broweres 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>

來源

2013-03-15 Rama Rao M

我可以更換解決此問題script和styles sheet與新版本的文件。但我仍然想知道，如果文件是舊版本，它如何在IE和Google Chrome中工作。

來源

2013-03-15 09:59:15

定製的jQuery滑塊給不同的瀏覽器輸出奇怪的結果

回答

相關問題