在IE中爲abbr標籤加樣式

在IE中爲abbr標籤加樣式 作者: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; reg = /]*)>([^<]*)/ABBR>/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使用abbr和acronym屬性選擇器,IE則使用acronym和span.abbr。無論如何,都被樣式化了——一個問號狀的鼠標光標(當鼠標指上後)和虛下劃線。 其他 1.感謝Michael Kusyn提供了JavaScript解決方法。 2.更多關於標籤和兩者的區別,參考Craig Saila的HTML is not an acronym... (Evolt.org)
發佈了18 篇原創文章 · 獲贊 1 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章