inline-block元素在布局時會給我們帶來很多方便，但它有一個明顯的bug,就是inline-block元素間會有一個4px的間隙（有的浏覽器可能是8px）。廢話不多說了，直接講解決方法吧。
總體來時可分為兩種方法，一種是改變html結構法,另一種是css法。
先說第一種，比如下面這段代碼:
<ol>
<li>首頁</li>
<li>關於我們</li>
<li>聯系我們</li>
<li>加入我們</li>
</ol>
假設 li 是 inline-block元素，則 li 間會出現討厭的空隙，這時我們可以換個寫法：
<ol>
<li>首頁</li
><li>關於我們</li
><li>聯系我們</li
><li>加入我們</li>
</ol>
或
<ol>
<li>
首頁</li><li>
關於我們</li><li>
聯系我們</li><li>
加入我們</li>
</ol>
或
<ol>
<li>首頁</li><!--
--><li>關於我們</li><!--
--><li>聯系我們</li><!--
--><li>加入我們</li>
</ol>
以上三種寫法都是可以的，總之就是避免讓 </li>與<li>之間出現書面上的空格。
還有一種寫法是去除閉合標簽，如：
<ol>
<li>首頁
<li>關於我們
<li>聯系我們
<li>加入我們
</ol>
這種寫法因為不符合html規范，所以還是避免使用為好
第二種是css解決方法。思路是把inline-block元素的父元素的font-size設為0，letter-spacing和word-spacing設為負數，然後再在inline-block元素中把這幾個值恢復正常即可。
ul{
font-size:0;
letter-spacing:-4px; /*實際情況下 -4這個值可能還要調整*/
word-spacing:-4px; /*實際情況下 -4這個值可能還要調整*/
}
ul li{
display:inline-bolck;
zoom:1;
font-size:12px;
letter-spacing:normal;
word-spacing:normal;
}
貌似我還看到過一種js方法，思路大概是通過移除inline-block元素之間的文本節點來實現的，但能用css解決的東西就別動用js啦。
參考:http://hovertree.com/hvtart/bjae/isnqi1t4.htm