當inline-block和text-indent遇到IE6,IE7

在實際應用中,考慮到seo,很多button,icon都要用到inline-block和text-indent來處理,例如:

  1. <a href="#" class="btn">Button</a>

css我習慣寫成這樣

  1. .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-p_w_picpath:url(img.jpg);}

在標準瀏覽器下是沒問題的,但是在IE6和7下會觸發A標籤消失的bug。

解決方法1:

  1. display:inline-block;

改爲

  1. display:block;

然後再做佈局處理。

解決方法2:

  1. text-indent:-9999px;

改爲

  1. font-size:0; line-height:0;

或者各種可以隱藏掉內容元素的方法。

解決方法3:

  1. &nbsp;<a href="#" class="btn">Button</a>

在按鈕前面增加任何元素,都可以讓消失的按鈕重新出現。

解決方法4:
給元素加 position:absolute;

PS:inline或inline-block元素設置text-indent在IE6/IE7中顯示不正常的bug致使text-indent會傳遞到父及元素,也就出現了上文中的結果。

造成這種情況的原因應該是IE6/IE7並沒有真正實現inline-block,而是通過設置display:inline-block觸發了IE的layout,從而使內聯元素擁有了inline-block屬性的表症。

考察元素的默認樣式,可知:input、select、button、textarea的默認display皆爲inline-block,所以在佈局時應加以注意…來自www.mai0.net

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章