簡介

　　<abbr>是用來為web頁面上的簡稱（譯者注：這里把簡稱和縮寫分開而論，簡稱范圍比縮寫大，取首字母的縮寫用<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會為<acronym>標(biāo)簽的title屬性顯示提示，但是會忽略<abbr>標(biāo)簽。

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

　　解決方法

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

　　代碼例子

　　看一下下面的代碼，是一個簡單的縮寫詞的例子：

　　<abbr title="Cascading Style Sheets">CSS</abbr>

　　現(xiàn)在，對比一下修改后的代碼：

　　<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>

　　自動操作

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

　　你可能注重到了，這個頁面（譯者注：原作者的頁面）上的簡寫詞語即使在IE里都會有提示，并且加了CSS樣式（虛下劃線和一個問號狀的鼠標(biāo)光標(biāo)）。然而你假如看一下源代碼，你將找不到在上文提到的<span>標(biāo)簽。這得益于本頁加載的一個簡單的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;

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

　　樣式化

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

　　abbr, acronym, span.abbr {
　　cursor: help;
　　border-bottom: 1px dashed #000;
　　}

　　Mozilla和Opera使用abbr和acronym屬性選擇器，IE則使用acronym和span.abbr。無論如何，<abbr>和<acronym>都被樣式化了——一個問號狀的鼠標(biāo)光標(biāo)（當(dāng)鼠標(biāo)指上后）和虛下劃線。