很多時候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空白间隙的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。