簡介
<abbr>是用來為web頁面上的簡稱(譯者註:這裡把簡稱和縮寫分開而論,簡稱範圍比縮寫大,取首字母的縮寫用<acronym>標籤)添加適當標註的XHTML標籤, Windows的IE瀏覽器暫不支援<abbr>標籤。 在IE裡,你可以應用CSS給<acronym>但是不能應用給<abbr>標籤,IE會為<acronym>標籤的title屬性顯示提示,但是會忽略<abbr>標籤。
這個IE的bug(或特色)使得一些網站人員認為<abbr>標籤一點用都沒有,而顯然這麼認為是不對的。在Mozilla和Opera裡還是很正確的處理了這個標籤,而且它對於web內容的可讀性和語義化來說非常重要。這也是我為什麼一直在尋找解決方法,最終我找到了。
解決方法
本方法基於一個簡單的事實:即使IE會忽略<abbr>標籤,但是其他嵌套在<abbr>標籤裡的標籤還是正常的。所以我在嵌了一個<span>標籤在<abbr>裡,設定<span>的title和class屬性,然後<abbr>開始變得跟<acronym>標籤一樣了。
程式碼例子
看一下下面的程式碼,是一個簡單的縮寫的例子:
<abbr title="Cascading Style Sheets">CSS</abbr>
現在,比較一下修改後的程式碼:
<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>
自動操作
手動的給每一個<abbr>標籤嵌入<span>顯然不可能-既無聊又對Mozilla和Opera沒必要。幸運的是,現在有一個自動的、基於客戶端腳本的解決方法。
你可能注意到了,這個頁面(譯者註:原作者的頁面)上的簡寫詞語即使在IE裡都會有提示,並且加了CSS樣式(虛下劃線和一個問號狀的滑鼠遊標)。然而你如果看一下原始碼,你將找不到在上文提到的<span>標籤。這要歸功於本頁載入的一個簡單的JavaScript:
這段腳本會檢查客戶端瀏覽器,如果是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>都被樣式化了——一個問號狀的滑鼠遊標(當老鼠指上後)和虛下劃線。