inline-block空白间隙
生活随笔
收集整理的這篇文章主要介紹了
inline-block空白间隙
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很多時候display:inline-block比float:left;好用。也因為IE6 7不支持inline-block,所有一般都這樣寫:{display:inline-block; *display:inline; *zoom:1},但是用了inline-block之后一些較高級的瀏覽器會出現空白間隙,而在IE6 7下是沒有的。如圖:
?
其實這個問題是我們自己造成的,為了代碼的可讀性,在一行結束打個回車換行,回車產生回車符,回車符相當于空白符,真正原因就是這個回車符。
解決方法:竟然是字符,那么只需要把字體大小設置成0就好了。font-size:0;這個方法在safari瀏覽器下還是有問題的,完整的解決方法是:
ul{font-size:0;letter-spacing: -8px;/*根據不同字體字號或許需要做一定的調整*/word-spacing: -8px; } li{display:inline-block;*display:inline;*zoom:1;letter-spacing:normal;word-spacing:normal; }
轉載于:https://www.cnblogs.com/xiaojiu9/p/4597390.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的inline-block空白间隙的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【BZOJ3590】[Snoi2013]
- 下一篇: luogu2034