在IE中為abbr標籤加上樣式_CSS/HTML

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

版權:譯者JunChen所有，轉載請聯絡譯者。
簡介

是用來為web頁面上的簡稱（譯者註：這裡把簡稱和縮寫分開而論，簡稱範圍比縮寫大，取首字母的縮寫用標籤）添加適當標註的XHTML標籤，Windows的IE瀏覽器暫不支援標籤。 在IE裡，你可以應用CSS給但是不能應用給標籤，IE會為標籤的title屬性顯示提示，但是會忽略標籤。

這個IE的bug（或特色）讓一些網站人員認為標籤一點用都沒有，而顯然這麼認為是不對的。在Mozilla和Opera裡還是很正確的處理了這個標籤，而且它對於web內容的可讀性和語義化來說非常重要。這也是我為什麼一直在尋找解決方法，最終我找到了。

解決方法

本方法基於一個簡單的事實：即使IE會忽略標籤，但是其他嵌套在標籤裡的標籤還是正常的。所以我在嵌了一個標籤在裡，設定的title和class屬性，然後開始變得跟標籤一樣了。

程式碼範例

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

CSS
現在，比較一下修改後的程式碼：

CSS
自動操作

手動的給每一個標籤嵌入顯然不可能－既無聊又對Mozilla和Opera沒必要。幸運的是，現在有一個自動的、基於客戶端腳本的解決方法。

你可能注意到了，這個頁面（譯者註：原作者的頁面）上的簡寫詞語即使在IE裡都會有提示，並且加了CSS樣式（虛下劃線和一個問號狀的滑鼠遊標）。然而你如果看一下原始碼，你將找不到在上文提到的標籤。這要歸功於本頁載入的一個簡單的JavaScript：

function styleAbbr() {
  var oldBodyText, newBodyText, reg
  if (isIE) {
    oldBodyText = document.body.innerHTML; )>([^/g;
    newBodyText = oldBodyText.replace(reg, '$2 ');
    document.body.innerHTML = newBodyText;
  }
}
window.onload = function(){
  styleAbbr()
;isIE = (document.all) ? true:false;

這段腳本會檢查客戶端瀏覽器，如果是IE，那麼則替換所有的標籤為修改過的版本（嵌入了）。注意的是我們必須使用正規表示式和innerHTML屬性來取代標準的DOM方法，因為IE不能透過DOM來取得屬性。

樣式化

最後看一下這個頁面上使用的CSS。相當簡單：

abbr, acronym, span.abbr {

  cursor: help;

  border-bottom: 1px dashed #000;
}
Mozilla和Opera使用abbrillac使用acronym和span.abbr。無論如何，和都被樣式化了——一個問號狀的滑鼠遊標（當滑鼠指上後）和虛下劃線。

其他

1.感謝Michael Kusyn提供了JavaScript解決方法。

2.更多關於，標籤和兩者的區別，參考Craig Saila的HTML is not an acronym... （Evolt.org）

歡迎交流意見評論，可寄至

marek@sovavsiti.cz

.