在IE中为abbr标签加样式

| 2 Comments | 0 TrackBacks

简介

<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>标签一样了。

代码例子

看一下下面的代码,是一个简单的缩写词的例子:

CSS 现在,对比一下修改后的代码:CSS

自动操作

手动的给每一个<abbr>标签嵌入<span>显然不可能----既无聊又对Mozilla和Opera没必要。幸运的是,现在有一个自动的、基于客户端脚本的解决方法。

你可能注意到了,这个页面(译者注:原作者的页面)上的简写词语即使在IE里都会有提示,并且加了CSS样式(虚下划线和一个问号状的鼠标光标)。然而你如果看一下源代码,你将找不到在上文提到的<span>标签。这得益于本页加载的一个简单的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;

  ----你可能注意到了,我的站点也具有了此功效,是因为我将上面的代码写入了一个名为abbr.js的脚本中,然后在Themeheader.php中加入了这样一段代码:
同时和插件Acronym Replacer配合使用就可以了。Zhu8[注]

这段脚本会检查客户端浏览器,如果是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 SailaHTML is not an acronym...Evolt.org


欢迎交流意见评论,可以发邮件至marek@sovavsiti.cz.

  • 原文:http://www.sovavsiti.cz/css/abbr.html

  • 翻译:JunChen

  • 版权:译者JunChen所有,转载请联系译者。
  • No TrackBacks

    TrackBack URL: http://www.whopig.com/cgi-bin/mt/mt-tb.cgi/18

    2 Comments

    seen

    签名:My Blog (酱油小子)

    这垃圾人真受不了他了,一年半了,不管我到哪,丫迟早都要来乱吐垃圾。什么人啊这是!
    By Zhu8

    嘿嘿,贵站的链接已改好

    这套皮肤满清爽,不过就是停晃眼睛的
    表情图标真可爱,哈哈

    Leave a comment

    最新日志 | Recent Entries

    Movable Type 4网站重构记录
    涅磐-WhoPig.COM
    家驹十五载,永远的Beyond
    Great Teacher Onizuka
    【六一快乐】史上最惨的小白兔
    南京,你悲伤吗?
    红色莫斯科
    又换回MovableType
    从wordpress到textpattern
    小波十一年

    最新评论 | Recent Comments