在IE中为abbr标签加样式 - HTML -

在IE中为abbr标签加样式

时间:2013-05-29 13:46:43   来源:   评论:加载中...   点击:加载中...
简介<abbr>是用来为web页面上的简称(译者注:这里把简称和缩写分开而...

简介

<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()
  };


相关热词搜索:

 
上一篇:定义标题的最好方法
下一篇:w3c技术架构介绍
收藏 将此文推荐给朋友
分享到: