IE6中a標簽同時使用inline-block與text-indent時出現的BUG
IE6中inline-block與text-indent同時使用時沒想到也存在BUG 。以前寫代碼做按鈕時喜歡用a標簽再給個背景，因為圖片上的字體好看所以直接就用了圖片，a標簽也沒有加文本 。然而，最近考慮到SEO優化，需要給a標簽加上文本，第一想到的方法就是給a標簽加上文本后使用text-indent將文字隱藏掉 。在谷歌中顯示完好，放到IE6中測試，卻顯示的很詭異 。如下圖：
代碼如下：
復制代碼代碼如下:
div style="margin:0 auto;width:300px;border:1px #ccc solid;background:#f8f8f8;"
a style="display:inline-block;width:60px;height:30px;background:green;color:red;font-size:12px;text-indent:-20px;"IE中顯示/a
/div
在谷歌中顯示的是我們所預期的那樣，在IE6中則這個背景都往左移動了 。（好像在IE7中也存在這個BUG，不過還不確認，因為我的IETESTER打不開IE7）
百度搜索了一下，果然也有人遇到我這樣的情況 。同時也找了一下解決的方法，目前找到的方法有以下幾種：
1、將a標簽的inline-block換成block；（如果有多個a標簽似乎就不管用了）
2、在a標簽前面加一個nbsp; ；（個人覺得這個方法有點瑕疵）
3、給a標簽加上line-height:200px;overflow:hidden; （使用line-height后就不需要使用text-indent）
4、給a標簽加上absolute（此方法也不需要text-indent）
自己也找到了一個解決的方法，給a標簽加上float就可以了 。
text-indent在IE6/IE7中的位置偏移BUG
text-indent一般用來實現文字縮進 ， 不過更多的時候是用來實現文字隱藏 。發現在IE6/IE7中，text-indent會導致inline- block元素出現向左(text-indent的值為負時)或向右(text-indent值為正時)的偏移 。
inline-block元素設置text-indent在IE6/IE7中不正常 ， 在IE8中正常 。造成這種情況的原因應該是IE6/IE7并沒有真正實現inline-block，而是通過設置display:inline-block觸發了IE的layout ， 從而使內聯元素擁有了inline-block屬性的表癥 。
解決方法：
.element {display:inline-block !important; display:block;}
因為ie6/ie7不支持 important 屬性，所以在 ie6/ie7 下元素會顯示為一個 block 級元素 ， 而在支持 important 的瀏覽器（firefox, safari）下元素將顯示為一個 inline-block 級元素 。
