在IE中为abbr标签加样式

北京兴路丰广告

北京兴路丰广告

2016-01-29 11:51

在IE中为abbr标签加样式,在IE中为abbr标签加样式
  原文:http://www.sovavsiti.cz/css/abbr.html 翻译: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()
};

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

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

 
展开更多 50%)
分享

猜你喜欢

在IE中为abbr标签加样式

Html CSS布局 Div+CSS XHTML
在IE中为abbr标签加样式

在Word2024“样式检查器”中清除样式

word
在Word2024“样式检查器”中清除样式

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

怎样在Word2024样式库中删除样式

word
怎样在Word2024样式库中删除样式

在IE中托管Windows Form

编程语言 网络编程
在IE中托管Windows Form

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

在Word中利用样式添加目录

电脑入门
在Word中利用样式添加目录

在CorelDRAW中创建颜色样式

Illustrator CorelDRAW
在CorelDRAW中创建颜色样式

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PSV《真三国无双7 猛将传》陈宫兵法用法解析

PSV《真三国无双7 猛将传》陈宫兵法用法解析

AutoCAD三维建模教程:美的牌风扇建模过程

AutoCAD三维建模教程:美的牌风扇建模过程
下拉加载更多内容 ↓