日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

IE6中a標(biāo)簽同時(shí)使用inline-block與text-indent時(shí)出現(xiàn)的BUG

云知道

IE6中inline-block與text-indent同時(shí)使用時(shí)沒想到也存在BUG 。以前寫代碼做按鈕時(shí)喜歡用a標(biāo)簽再給個(gè)背景，因?yàn)閳D片上的字體好看所以直接就用了圖片，a標(biāo)簽也沒有加文本 。然而，最近考慮到SEO優(yōu)化，需要給a標(biāo)簽加上文本，第一想到的方法就是給a標(biāo)簽加上文本后使用text-indent將文字隱藏掉 。在谷歌中顯示完好，放到IE6中測(cè)試，卻顯示的很詭異 。如下圖：

IE6中a標(biāo)簽同時(shí)使用inline-block與text-indent時(shí)出現(xiàn)的BUG



代碼如下：

復(fù)制代碼代碼如下:
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

在谷歌中顯示的是我們所預(yù)期的那樣，在IE6中則這個(gè)背景都往左移動(dòng)了 。（好像在IE7中也存在這個(gè)BUG，不過還不確認(rèn)，因?yàn)槲业腎ETESTER打不開IE7）
百度搜索了一下，果然也有人遇到我這樣的情況 。同時(shí)也找了一下解決的方法，目前找到的方法有以下幾種：
1、將a標(biāo)簽的inline-block換成block；（如果有多個(gè)a標(biāo)簽似乎就不管用了）
2、在a標(biāo)簽前面加一個(gè)nbsp; ；（個(gè)人覺得這個(gè)方法有點(diǎn)瑕疵）
3、給a標(biāo)簽加上line-height:200px;overflow:hidden; （使用line-height后就不需要使用text-indent）
4、給a標(biāo)簽加上absolute（此方法也不需要text-indent）
自己也找到了一個(gè)解決的方法，給a標(biāo)簽加上float就可以了 。

text-indent在IE6/IE7中的位置偏移BUG

text-indent一般用來實(shí)現(xiàn)文字縮進(jìn)，不過更多的時(shí)候是用來實(shí)現(xiàn)文字隱藏 。發(fā)現(xiàn)在IE6/IE7中，text-indent會(huì)導(dǎo)致inline- block元素出現(xiàn)向左(text-indent的值為負(fù)時(shí))或向右(text-indent值為正時(shí))的偏移 。
inline-block元素設(shè)置text-indent在IE6/IE7中不正常，在IE8中正常 。造成這種情況的原因應(yīng)該是IE6/IE7并沒有真正實(shí)現(xiàn)inline-block，而是通過設(shè)置display:inline-block觸發(fā)了IE的layout，從而使內(nèi)聯(lián)元素?fù)碛辛薸nline-block屬性的表癥 。
解決方法：
.element {display:inline-block !important; display:block;}
因?yàn)閕e6/ie7不支持 important 屬性，所以在 ie6/ie7 下元素會(huì)顯示為一個(gè) block 級(jí)元素，而在支持 important 的瀏覽器（firefox, safari）下元素將顯示為一個(gè) inline-block 級(jí)元素 。

    推薦閱讀