在實際應用中,考慮到seo,很多button,icon都要用到inline-block和text-indent來處理,例如:
- <a href="#" class="btn">Button</a>
css我習慣寫成這樣
- .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-p_w_picpath:url(img.jpg);}
在標準瀏覽器下是沒問題的,但是在IE6和7下會觸發A標籤消失的bug。
解決方法1:
- display:inline-block;
改爲
- display:block;
然後再做佈局處理。
解決方法2:
- text-indent:-9999px;
改爲
- font-size:0; line-height:0;
或者各種可以隱藏掉內容元素的方法。
解決方法3:
- <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