▲歷史回眸--abbr和acronym的淵源

　　網景和微軟的瀏覽器之戰早已淡去多年，最終以微軟的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！

　　申明：後半部分的代碼參考自網上。