display:inline-block引起的間隙問題解決辦法

在網頁佈局中咱們常常會用到display:inline-block;好處是：可以將塊狀元素按照內聯元素的方式佈局，同時能設置寬高。我的感受很好用，但是用多了慢慢的問題就來了？

1.display:inline-block;在IE6/7中不兼容

解決辦法：display:inline-block;*dsiplay:inline;*zoom:1;

2.display:inline-block;會產生莫名的間隙（4px）

緣由：換行或空格會佔據必定的位置，從而產生間隙，

解決辦法：

1.在html代碼中除去當前元素的空格或換行，該方法太麻煩，並且影響HTML代碼的可讀性，不同意。

2.在當前元素的父元素中設置font-size:0;其做用與1方法本質上是同樣的，但有可能在chorme中不支持

3.在當前元素的父元素中設置letter-spaceing:-4px;其做用是能夠控制文字間的水平距離，可讓文字水平方向上重疊（line-height是讓文字垂直方向上重疊），這樣就抵消了空格或換行的佔位。

結論以下：
» block水平的元素inline-block化後，IE6/7沒有換行符間隙問題，其餘瀏覽器均有；
» inline水平的元素inline-block後，全部主流瀏覽器都有換行符/空格間隙問題；
» font-size:0，去除換行符間隙，在IE6/7下殘留1像素間隙，Chrome瀏覽器無效，其餘瀏覽器都完美去除；
» letter-spacing負值能夠去除全部瀏覽器的換行符間隙，可是，Opera瀏覽器下極限是間隙1像素，0像素會反彈，換行符間隙還原。

推薦解決方法：

同時設置font-size:0;letter-spaceing:-4px;

 

 

本文參考張鑫旭的 拜拜了,浮動佈局-基於display:inline-block的列表佈局