作者：JunChen 2005-5-24 9:56:57
原文：http://www.sovavsiti.cz/css/abbr.html
翻譯：JunChen
版權:譯者JunChen所有，轉(zhuǎn)載請聯(lián)系譯者。
簡介
abbr>是用來為web頁面上的簡稱（譯者注：這里把簡稱和縮寫分開而論，簡稱范圍比縮寫大，取首字母的縮寫用acronym>標簽）添加適當標注的XHTML標簽，Windows的IE瀏覽器暫不支持abbr>標簽。 在IE里，你可以應用CSS給acronym>但是不能應用給abbr>標簽，IE會為acronym>標簽的title屬性顯示提示，但是會忽略abbr>標簽。
這個IE的bug（或者特色）使得一些網(wǎng)站人員認為abbr>標簽一點用都沒有，而顯然這么認為是不對的。在Mozilla和Opera里還是很正確的處理了這個標簽，并且它對于web內(nèi)容的可讀性和語義化來說非常重要。這也是我為什么一直在尋找解決方法，最終我找到了。
解決方法
本方法基于一個簡單的事實：即使IE會忽略abbr>標簽，但是其他嵌套在abbr>標簽里的標簽還是正常的。所以我在嵌了一個span>標簽在abbr>里，設置span>的title和class屬性，然后abbr>開始變得和acronym>標簽一樣了。
代碼例子
看一下下面的代碼，是一個簡單的縮寫詞的例子：
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>標簽嵌入span>顯然不可能——既無聊又對Mozilla和Opera沒必要。幸運的是，現(xiàn)在有一個自動的、基于客戶端腳本的解決方法。
你可能注意到了，這個頁面（譯者注：原作者的頁面）上的簡寫詞語即使在IE里都會有提示，并且加了CSS樣式（虛下劃線和一個問號狀的鼠標光標）。然而你如果看一下源代碼，你將找不到在上文提到的span>標簽。這得益于本頁加載的一個簡單的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>標簽為修改過的版本（嵌入了span>）。注意的是我們必須使用正則表達式和innerHTML屬性來取代標準的DOM方法，因為IE不能通過DOM來獲取abbr>屬性。
樣式化
最后看一下這個頁面上使用的CSS。相當簡單：
abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}
Mozilla和Opera使用abbr和acronym屬性選擇器，IE則使用acronym和span.abbr。無論如何，abbr>和acronym>都被樣式化了——一個問號狀的鼠標光標（當鼠標指上后）和虛下劃線。
其他
1.感謝Michael Kusyn提供了JavaScript解決方法。
2.更多關于abbr>，acronym>標簽和兩者的區(qū)別，參考Craig Saila的HTML is not an acronym... （Evolt.org）
歡迎交流意見評論，可以發(fā)郵件至marek@sovavsiti.cz.
