DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 在IE中為abbr標簽加樣式
在IE中為abbr標簽加樣式
編輯:關於網頁技巧     
  • 原文:http://www.sovavsiti.cz/css/abbr.html
  • 翻譯:JunChen

  簡介

  <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:

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>標簽和兩者的區別,參考Craig Saila的HTML is not an acronym... (Evolt.org

  歡迎交流意見評論,可以發郵件至[email protected].

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved