作者：JunChen 2005-5-24 9:56:57
原文：http://www.sovavsiti.cz/css/abbr.html
翻譯：JunChen

版權(quán):譯者JunChen所有，轉(zhuǎn)載請(qǐng)聯(lián)系譯者。
簡(jiǎn)介

<abbr>是用來(lái)為web頁(yè)面上的簡(jiǎn)稱（譯者注：這里把簡(jiǎn)稱和縮寫(xiě)分開(kāi)而論，簡(jiǎn)稱范圍比縮寫(xiě)大，取首字母的縮寫(xiě)用<acronym>標(biāo)簽）添加適當(dāng)標(biāo)注的XHTML標(biāo)簽，Windows的IE瀏覽器暫不支持<abbr>標(biāo)簽。 在IE里，你可以應(yīng)用CSS給<acronym>但是不能應(yīng)用給<abbr>標(biāo)簽，IE會(huì)為<acronym>標(biāo)簽的title屬性顯示提示，但是會(huì)忽略<abbr>標(biāo)簽。

這個(gè)IE的bug（或者特色）使得一些網(wǎng)站人員認(rèn)為<abbr>標(biāo)簽一點(diǎn)用都沒(méi)有，而顯然這么認(rèn)為是不對(duì)的。在Mozilla和Opera里還是很正確的處理了這個(gè)標(biāo)簽，并且它對(duì)于web內(nèi)容的可讀性和語(yǔ)義化來(lái)說(shuō)非常重要。這也是我為什么一直在尋找解決方法，最終我找到了。

解決方法

本方法基于一個(gè)簡(jiǎn)單的事實(shí)：即使IE會(huì)忽略<abbr>標(biāo)簽，但是其他嵌套在<abbr>標(biāo)簽里的標(biāo)簽還是正常的。所以我在嵌了一個(gè)<span>標(biāo)簽在<abbr>里，設(shè)置<span>的title和class屬性，然后<abbr>開(kāi)始變得和<acronym>標(biāo)簽一樣了。

代碼例子

看一下下面的代碼，是一個(gè)簡(jiǎn)單的縮寫(xiě)詞的例子：

<abbr title="Cascading Style Sheets">CSS</abbr>
現(xiàn)在，對(duì)比一下修改后的代碼：

<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>
自動(dòng)操作

手動(dòng)的給每一個(gè)<abbr>標(biāo)簽嵌入<span>顯然不可能——既無(wú)聊又對(duì)Mozilla和Opera沒(méi)必要。幸運(yùn)的是，現(xiàn)在有一個(gè)自動(dòng)的、基于客戶端腳本的解決方法。

你可能注意到了，這個(gè)頁(yè)面（譯者注：原作者的頁(yè)面）上的簡(jiǎn)寫(xiě)詞語(yǔ)即使在IE里都會(huì)有提示，并且加了CSS樣式（虛下劃線和一個(gè)問(wèn)號(hào)狀的鼠標(biāo)光標(biāo)）。然而你如果看一下源代碼，你將找不到在上文提到的<span>標(biāo)簽。這得益于本頁(yè)加載的一個(gè)簡(jiǎn)單的JavaScript：

function styleAbbr() {
  var oldBodyText, newBodyText, reg
  if (isIE) {
    oldBodyText = document.body.innerHTML;
    reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
    newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
    document.body.innerHTML = newBodyText;
  }
}
window.onload = function(){
  styleAbbr()
};

isIE = (document.all) ? true:false;

這段腳本會(huì)檢查客戶端瀏覽器，如果是IE，那么則替換所有的<abbr>標(biāo)簽為修改過(guò)的版本（嵌入了<span>）。注意的是我們必須使用正則表達(dá)式和innerHTML屬性來(lái)取代標(biāo)準(zhǔn)的DOM方法，因?yàn)镮E不能通過(guò)DOM來(lái)獲取<abbr>屬性。

樣式化

最后看一下這個(gè)頁(yè)面上使用的CSS。相當(dāng)簡(jiǎn)單：

abbr, acronym, span.abbr {
  cursor: help;
  border-bottom: 1px dashed #000;
}
Mozilla和Opera使用abbr和acronym屬性選擇器，IE則使用acronym和span.abbr。無(wú)論如何，<abbr>和<acronym>都被樣式化了——一個(gè)問(wèn)號(hào)狀的鼠標(biāo)光標(biāo)（當(dāng)鼠標(biāo)指上后）和虛下劃線。

其他

1.感謝Michael Kusyn提供了JavaScript解決方法。
2.更多關(guān)于<abbr>，<acronym>標(biāo)簽和兩者的區(qū)別，參考Craig Saila的HTML is not an acronym... （Evolt.org）

歡迎交流意見(jiàn)評(píng)論，可以發(fā)郵件至marek@sovavsiti.cz.

最新評(píng)論