在IE中為abbr標(biāo)簽加樣式_Web標(biāo)準(zhǔn)教程
簡(jiǎn)介
<abbr>是用來(lái)為web頁(yè)面上的簡(jiǎn)稱(譯者注:這里把簡(jiǎn)稱和縮寫(xiě)分開(kāi)而論,簡(jiǎn)稱范圍比縮寫(xiě)大,取首字母的縮寫(xiě)用<acronym>標(biāo)簽)添加適當(dāng)標(biāo)注的XHTML標(biāo)簽,Windows的IE瀏覽器暫不支持<abbr>標(biāo)簽。 在IE里,你可以應(yīng)用CSS給<acronym>但是不能應(yīng)用給<abbr>標(biāo)簽,IE會(huì)為<acronym>標(biāo)簽的title屬性顯示提示,但是會(huì)忽略<abbr>標(biāo)簽。
這個(gè)IE的bug(或者特色)使得一些網(wǎng)站人員認(rèn)為<abbr>標(biāo)簽一點(diǎn)用都沒(méi)有,而顯然這么認(rèn)為是不對(duì)的。在Mozilla和Opera里還是很正確的處理了這個(gè)標(biāo)簽,并且它對(duì)于web內(nèi)容的可讀性和語(yǔ)義化來(lái)說(shuō)非常重要。這也是我為什么一直在尋找解決方法,最終我找到了。
解決方法
本方法基于一個(gè)簡(jiǎn)單的事實(shí):即使IE會(huì)忽略<abbr>標(biāo)簽,但是其他嵌套在<abbr>標(biāo)簽里的標(biāo)簽還是正常的。所以我在嵌了一個(gè)<span>標(biāo)簽在<abbr>里,設(shè)置<span>的title和class屬性,然后<abbr>開(kāi)始變得和<acronym>標(biāo)簽一樣了。
代碼例子
看一下下面的代碼,是一個(gè)簡(jiǎn)單的縮寫(xiě)詞的例子:
<abbr title="Cascading Style Sheets">CSS</abbr>
現(xiàn)在,對(duì)比一下修改后的代碼:
<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>
自動(dòng)操作
手動(dòng)的給每一個(gè)<abbr>標(biāo)簽嵌入<span>顯然不可能——既無(wú)聊又對(duì)Mozilla和Opera沒(méi)必要。幸運(yùn)的是,現(xiàn)在有一個(gè)自動(dòng)的、基于客戶端腳本的解決方法。
你可能注重到了,這個(gè)頁(yè)面(譯者注:原作者的頁(yè)面)上的簡(jiǎn)寫(xiě)詞語(yǔ)即使在IE里都會(huì)有提示,并且加了CSS樣式(虛下劃線和一個(gè)問(wèn)號(hào)狀的鼠標(biāo)光標(biāo))。然而你假如看一下源代碼,你將找不到在上文提到的<span>標(biāo)簽。這得益于本頁(yè)加載的一個(gè)簡(jiǎn)單的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;
這段腳本會(huì)檢查客戶端瀏覽器,假如是IE,那么則替換所有的<abbr>標(biāo)簽為修改過(guò)的版本(嵌入了<span>)。注重的是我們必須使用正則表達(dá)式和innerHTML屬性來(lái)取代標(biāo)準(zhǔn)的DOM方法,因?yàn)镮E不能通過(guò)DOM來(lái)獲取<abbr>屬性。
樣式化
最后看一下這個(gè)頁(yè)面上使用的CSS。相當(dāng)簡(jiǎn)單:
abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}
Mozilla和Opera使用abbr和acronym屬性選擇器,IE則使用acronym和span.abbr。無(wú)論如何,<abbr>和<acronym>都被樣式化了——一個(gè)問(wèn)號(hào)狀的鼠標(biāo)光標(biāo)(當(dāng)鼠標(biāo)指上后)和虛下劃線。
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開(kāi)始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- CSSer基礎(chǔ)知識(shí):World Wide Web Consortium
- CSSEditer適合編輯CSS的幾款編輯器簡(jiǎn)介
- 您知道WEB開(kāi)發(fā)者需要了解IE7的哪些新功能嗎
- 利用css的clear屬性搞定廣告文字環(huán)繞效果
- Microsoft于2008年2月12日將瀏覽器強(qiáng)制升級(jí)至IE7
- DIV+CSS設(shè)計(jì)實(shí)例:透明的導(dǎo)航菜單
- CSS做一個(gè)超鏈接的陷下效果
- 學(xué)習(xí)Web標(biāo)準(zhǔn) 給你的網(wǎng)頁(yè)選擇合適的文檔類型
- 實(shí)踐DIV+CSS網(wǎng)頁(yè)布局入門指南
- 玩轉(zhuǎn)Dreamweaver速記CSS屬性
猜你也喜歡看這些
- CSS實(shí)例:list-style-type在IE與FF中奇怪的現(xiàn)象解析
- 解決IE和Mozilla的布局差別的利器:“!important”
- 解決IE6.0、IE5.0、IE5.5差異
- IE6、IE7絕對(duì)定位與鏈接問(wèn)題研究
- 用!important解決IE和Mozilla的布局差別
- IE6下絕對(duì)定位的容器內(nèi)文本無(wú)法正常選擇的問(wèn)題
- XHTML1.0、XHTML Basic、XHTML1.1及XHTML2.0區(qū)別
- CSS的BUG:IE6中一個(gè)奇怪的現(xiàn)象!
- IE、Nascape環(huán)境中CSS的顯示差別
- text-overflow:ellipsis非IE的瀏覽器的另類應(yīng)用!
- 相關(guān)鏈接:
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-在IE中為abbr標(biāo)簽加樣式
。