[CSS:float]去除in-line物件中間的空白

我們經常會使用一個CSS的語法:display:inline-block,
來使多個物件保持在同一行的橫向水平中顯示。
例如頁面上方橫向的圖片選單。
 
但如果在HTML原始碼中,
這些需要擺在同一行的物件是換行寫的,
列如:
<div id=menu> //橫向選單開始
<a href="http://km.nicetypo.com/"><img src="spacer.gif" /></a> //換行
<a href="http://marmalade.nicetypo.biz"><img src="spacer.gif" /></a> //換行
</div>
那麼在不同的瀏覽器中,
會不定在每個物件中自動產生空白間隔,
同時每個瀏覽器添加的空白寬度也不一樣,
導致版面相容性的問題。
 
那麼要如何去除這些 in-line 物件中間不必要的空白呢?
 
解決方式:
在物件的CSS加入:float:left;font-size:0;
#menu a img{float:left;font-size:0}
 
這樣就可以讓空白去除,同時每個瀏覽器看來一致。

Readers comment