当前位置： 移动技术网 > IT编程>网页制作>CSS > 在IE中为abbr标签加样式

在IE中为abbr标签加样式

2017年12月12日  | 移动技术网IT编程  | 我要评论

作者：junchen 2005-5-24 9:56:57
原文：
翻译：junchen

版权:译者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）

欢迎交流意见评论，可以发邮件至.

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网