有關於使用inline-block來代替float的討論也蠻多的,最常說的就是使用inline-block來代替float進行布局,或者使用 inline-block來實現元素的居中效果。但是inline-block水平呈現的元素間,換行顯示或空格分隔的情況下會有間距。關於這個問題,原 來很多人不知道啊。呵呵~其實很簡單,當原素被轉換為inline-block顯示的時候,那么該元素會具有inline的一些屬性,所 以當你在標簽之間換行的時候會產生空格,inline-block之間的間距就是一個空格的位置,你要算間隙是幾個像素,其實依賴於你的字體設置大小,空 格是個字符啊,所以-margin補間距之類的方法不可取,所以大家每個人出來的負值都不一樣(-_-!)。空格是由inline-block標簽之間換 行產生的,那么解決方法簡單了,不要在轉換為inline-block的標簽的代碼之間換行就行了,開發人員一定要在精確布局的時候要注意一下。 inline-block具有inline的一些屬性,那么inline標簽代碼之間換行本來就會有空格產生 的;IE倒是奇怪沒有產生空格,但是也講的通。
解決方法:
第一:去掉html標簽中的空格和回車;
例如:
<ul><li>web前端開發</li><li>前端開發</li><li>前端開發:http://www.css119.com</li></ul>
第二:改變html標簽的結構(下面只展示出了一種,還有其他的類似方法);
例如:
<ul> <li>WEB前端開發</li ><li>前端開發</li ><li>前端開發:http://www.css119.com</li> </ul>
第三:利用負margin解決(不推薦,具體負margin多少取決於字體的大小);
第四:設置父元素font-size:0;子元素重新設置自己的font-size;
例如:
ul{font-size:0}
li{ display:inline-block;*display:inline;*zoom:1;background:green; padding:5px;font-size:12px}
可以看到在 ie8,firefox,chrome 和 opera 瀏覽器下已經沒有問題了,但是在 低版本safari 瀏覽器下還是有問題。
關於 低版本safari 瀏覽器的兼容。
可以利用letter-space:-N px或者word-spacing:-N px來解決。