使用圓角與jquery在ie

我想在我的meny中使用圓角代碼跨瀏覽器翻轉效果，但不在ie中工作。我試圖使用PIE甚至一些pllugins，但他們沒有工作。使用圓角與jquery在ie

這是我的代碼：

$("document").ready(function() { 

var ancho = $('nav li.nav_active').width()+24; 

    $('nav li.nav_active').css({ 
      'background-color' : '#282828', 
      "height" : ancho+"px", 
      'margin-top' : "-"+(ancho-48)/2+"px", 
      '-moz-border-radius' : ancho/2+"px", 
      '-webkit-border-radius' : ancho/2+"px", 
      '-khtml-border-radius' : ancho/2+"px", 
      'border-radius' : ancho/2+"px", 
      'behavior' : 'url(../PIE.htc)', 
      '-webkit-box-shadow' : '0 8px 6px -6px black', 
      '-moz-box-shadow' : '0 8px 6px -6px black', 
      'box-shadow' : '0 8px 6px -6px black', 
      'border' : 'none' 
      }); 
      $('nav li.nav_active a').css({ 
      "line-height" : ancho+"px", 
      "color" : "white", 
      "font-family" : "'E-BoldCondensed'", 
      }); 






$(function() { 
    $('nav li:not(.nav_active)').mouseover(
     function() { 
      var ancho = $(this).width()+32; 
      $(this).css({ 
      "height" : ancho+"px", 
      'margin-top' : "-"+(ancho-48)/2+"px", 
      '-moz-border-radius' : ancho/2+"px", 
      '-webkit-border-radius' : ancho/2+"px", 
      '-khtml-border-radius' : ancho/2+"px", 
      'border-radius' : ancho/2+"px", 
      'behavior' : 'url(../PIE.htc)', 
      '-webkit-box-shadow' : '0 8px 6px -6px black', 
      '-moz-box-shadow' : '0 8px 6px -6px black', 
      'box-shadow' : '0 8px 6px -6px black', 
      }); 
      $(this,'a').css({ 
      "line-height" : ancho+"px", 
      }); 
     }); 
}); 

$(function() { 
    $('nav li:not(.nav_active)').mouseleave(
     function() { 

      $(this).css({ 
      "height" : "", 
      'margin-top' : "", 
      '-moz-border-radius' : "", 
      '-webkit-border-radius' : "", 
      '-khtml-border-radius' : "", 
      'border-radius' : "", 
      '-webkit-box-shadow' : '', 
      '-moz-box-shadow' : '', 
      'box-shadow' : '', 

      }); 
      $(this,'a').css({ 
      "line-height" : '', 
      }); 
     }); 
}); 

$(function() { 
    $('nav li').mousedown(
     function() { 
      var ancho = $(this).width()+32; 
      $(this).css({ 
      "height" : ancho+"px", 
      'margin-top' : "-"+(ancho-48)/2+"px", 
      '-moz-border-radius' : ancho/2+"px", 
      '-webkit-border-radius' : ancho/2+"px", 
      '-khtml-border-radius' : ancho/2+"px", 
      'border-radius' : ancho/2+"px", 
      'behavior' : 'url(../PIE.htc)', 
      '-webkit-box-shadow' : '', 
      '-moz-box-shadow' : '', 
      'box-shadow' : '', 
      }); 
      $(this,'a').css({ 
      "line-height" : ancho+"px", 
      }); 
     }); 
}); 

});

這在我的網站的鏈接：www.miramarlab.com

來源

2012-04-14 Emilio Yero

你爲什麼不乾脆把所有的類，並使用'addClass（）'，而不是'CSS（）'？ – elclanrs 2012-04-14 22:06:36

哪個版本的IE？你有沒有嘗試靜態設置PIE角落，而不是JS？我敢打賭，PIE不支持動態添加的CSS。 – 2012-04-14 22:06:39

我正在使用css（），因爲我需要獲取li的寬度值才能計算出拐角的半徑以製作完美的圓。 – 2012-04-14 22:14:44

你只能和它使用CSS做沒有jquery（甚至沒有圖像）會更好。請閱讀這篇文章：http://jonraasch.com/blog/css-rounded-corners-in-all-browsers。希望這會有所幫助。

來源

2012-04-14 22:07:45 kpotehin

你應該調用相對於html頁面的htc文件，而不是css。也許這是罪魁禍首，並且htc文件有一個特定的mime類型，應該將其添加到.htaccess文件中。

保存在根目錄下的HTC文件，並以絕對路徑加載：

behavior: url (http://www.miramarlab.com/PIE.htc);

來源

2012-04-14 22:20:00 undefined

使用圓角與jquery在ie

回答

相關問題