使用圖像時，jquery選項卡式界面中斷

Question

使用jquery創建選項卡式界面。編碼是相當典型：

HTML：

<div id="tabbed-interface"> 
<ul> 
<li><a href="#option1">Option1</a></li> 
<li><a href="#option2">Option2</a></li> 
<li><a href="#option3">Option3</a></li> 
</ul> 
</div> 

的jQuery：

$(document).ready(function(){ 
$('#tabbed-interface li:first').addClass('active'); 
$('#tabbed-interface div').not(':first').hide(); 
$('#tabbed-interface>ul>li>a').click(function(event){ 
$('#tabbed-interface>ul>li').removeClass('active'); 
$(event.target).parent().addClass('active'); 
$('#tabbed-interface>div').fadeOut().filter(this.hash).fadeIn(250); 
return false;});}); 

CSS：

ul li {background: #232323; list-style: none; border: 1px solid #616161; } 
ul li.active {background: none; list-style: none; border: 1px solid: #616161; border-bottom: 1px solid #121212; z-index: 1; } 

，你可以看到，這一切確實是添加類「活躍'點擊的li，這對應於是否顯示背景。這與文本完美的工作，但我需要使用非標準的字體。當我嘗試使用透明的.png圖像來解決問題時，它是不可靠的。

例如，改變HTML到：

<div id="tabbed-interface"> 
<ul> 
<li><a href="#option1"><img src="option1.png" /></a></li> 

Answer 1

如果使用非標準字體是你的目標，我會避免使用內嵌圖片。網絡已經走過了一段很長的路，並且有一些不太脆弱和突兀的解決方案可供您使用。

目前有三種方法（即我所知道的）與您選擇的字體更換瀏覽器的字體：

• sIFR是基於閃存的方法。
• cufon使用SVG和JavaScript的組合來呈現文本。
• CSS3 font替換是一種純CSS替換字體的方法，並且有a number的articles解釋瞭如何實現它cross-browser。

每種方法都有其缺點（例如，cufon使複製粘貼標題文本變得困難），但最終它們都是處理靜態圖像的更好選擇。