▲历史回眸--abbr和acronym的渊源

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

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

　　文本下方有类似border-style:dotted样式的虚线；
　　鼠标移到文本时，会有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标签的问题？有两个办法。

　　通过嵌套无语义的span标签，来模拟acronym。具体实现代码如下：
```
<abbr title="Cascading Style Sheet">
　　　<span class="abbr" title="Cascading Style Sheet">CSS</span>
</abbr>
```
　　这时候，你再结合上面的样式，就会发现问题已经解决。但是这种方法不够好，代码不够健壮。如何不添加额外标签而让abbr实现应有的表现？
脚本实现

　　追加脚本代码：

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！

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

posted @ 2013-06-18 10:21 捌莱闲人阅读(1135) 评论(0) 编辑收藏举报

刷新页面返回顶部

捌莱闲人

▲历史回眸--abbr和acronym的渊源

公告