▲历史回眸

网景和微软的浏览器之战早已淡去多年，最终以微软的IE浏览器胜出，特别是IE6的出现，一度成为世界浏览器的霸主，至今无人能敌。去年IE6荣获“终身成就奖”，真是实至名归。本文涉及的两个标签abbr和acronym，与这两家公司渊源颇深，让我们一起来通过它们去回顾那段风云岁月，更深入地去了解它们吧！

从用法上来说，abbr和acronym并没有多大区别，它们作为缩写标签在HTML4.0就已经被引入。abbr缩略的范围更为广泛，可以是短语、单词首字母、甚至中文，acronym当然也都可以用，但是更精确的用法应该是用来缩写单词首字母。它们在浏览器上的表现形式主要有两点：

1. 文本下方有类似border-style:dotted样式的虚线；
2. 鼠标移到文本时，会有pop弹出，pop里面的文字即标签title属性的值。

其实这两点表现形式，正好把缩略标签的作用体现出来：一个是重点提示，另外就是缩略功能。

刚开始，网景发明了abbr，人们通过鼠标移到文本上方，就能看到对文本更加详细的注释。但是在IE6及其以下版本不会出现这样的效果。为什么？因为当年网景和微软在竞争白热化的情况下，微软的IE浏览器索性直接忽略abbr标签。那微软也想通过一个标签，能够实现上述那样的效果，怎么办？

在那个浏览器市场决定生杀大权的时代，无人能够阻止微软的“霸道”，于是另一个缩写标签应运而生，它就是acronym。acronym的出现当然能够解决IE6及其以下版本不显示问题，但是从此web开发中有了两个缩写标签，它们都能够通过w3c的验证，而开发人员经常是傻傻分不清楚两者的区别了。

都说三十年河东三十年河西，当年网景败给微软，网景的许多工程师纷纷离职，他们中的许多人又纷纷加入目前为大家所熟知的IT公司，如google、apple、w3c组织、mozilla，这些工程师先后开发出firefox、chrome、safari等目前世界上主流的浏览器；另一方面，由于微软IE浏览器渐显老态龙钟，不管是漏洞或者启动速度，还是访问体验。用户的抱怨越来越多，终于有一天，用户大规模地逃离，让微软意识到需要对IE6进行升级了。所以大家会发现，从06年以后，微软对IE浏览器的升级越来越频繁。

微软的“霸道”在十多年后，终于是受到了惩罚。w3c组织在HTML5明确提出，acronym将作为废弃标签而不再被应用到web开发中了。

所以，通过这段历史的阐述，我想说明的是：所有存在的东西都是由当时的历史决定的，有些东西最终被历史淘汰，跟它自身的局限性息息相关。人们渴望大一统，正所谓合久必分，分久必合。

现在，我们可以不必理会acronym了，把心放到abbr上来。先给行简单的代码：

<abbr title="Cascading Style Sheet">CSS</abbr>

将这行代码放在body结构里，在各浏览器下查看效果。你会发现，使用ie7以上版本的trident浏览器，webkit和gecko浏览器，当鼠标移到“CSS”文字上时，会有pop弹出，其中IE和谷歌浏览器的文本下方没有虚线，而火狐和opera则有虚线。前面说过，abbr在IE6下直接被忽略，所以什么效果都没有。

为了让虚线效果都一致，你可以添加这样一段样式：

abbr,acronym,span.abbr{    cursor : help;    border-bottom : 1px dotted #333;}

这时候，再查看，除了虚线一致外，鼠标移到文本上还有一个问号提示呢。

如何解决IE6忽略abbr标签的问题？有两个办法。

1. 通过嵌套无语义的span标签，来模拟acronym。具体实现代码如下：

   <abbr title="Cascading Style Sheet">　　　<span class="abbr" title="Cascading Style Sheet">CSS</span></abbr>

   这时候，你再结合上面的样式，就会发现问题已经解决。但是这种方法不够好，代码不够健壮。如何不添加额外标签而让abbr实现应有的表现？

2. 脚本实现

追加脚本代码：

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;

把这段代码添加到head头部里，同样可以解决IE6不兼容abbr标签的问题。该段脚本很简单，相信大家都看得懂。不作解释...

希望本文对你有帮助，up！

申明：后半部分的代码参考自网上。