??? 最近這幾天看了inline-block的用法，用它來代替浮動實現水平排列很不錯，只是要解決一下瀏覽器兼容和間隙的問題。關于ie6，7的兼容問題 《inline-block 前世今生》（http://ued.taobao.com/blog/2012/08/inline-block/）里講解的很細致深入，解決辦法也講的很詳細，在這里自己就簡單記錄下。

??? 首先就是inline-block在ie6,7的表現，行內元素在設置inline-block之后表現出來的就是水平排列，但是塊級元素仍然是自上而下排列，截圖如下：

???

???? 關于這個差異解釋是，在ie6,7下行內元素的inline-block觸發了hasLayout屬性，其表現和inline-block類似，而塊級元素觸發了hasLayout也不能水平排列，所以要解決這個差異，可以用inline讓塊級元素轉行成inline元素得以換行，然后用zoom：1觸發hasLayout，所以有了以下代碼：

???? *display:inline; /* 其實是針對IE6、7 block 元素 */
???? *zoom:1;

???? 這樣修復以后，ie6,7下塊級元素表現的很好，水平排列并且沒有間隙，但是行內元素有間隙，其他瀏覽器如ff，chrome也有間隙，截圖如下：

????

???? 造成這個間隙的是空白符，換行回車都會產生這個空白符，上面提到的博文里很細致的解決了這個問題，但是我個人比較懶，覺得解決方法比較繁瑣，在參考了http://css-tricks.com/fighting-the-space-between-inline-block-elements 這篇blog后，覺得下面的這個解決方法不錯：

<div><a href="">行內元素1</a><!----><a href="">行內元素2</a><!----><a href="">行內元素3</a><!----><a href="">行內元素4</a></div>

???? 既然間隙是空白符造成的，去掉空白符就好了，這種方法可能不太優雅，不過在要求不太嚴格的情況下可以用一下。

???? 現在皆大歡喜了：

????

????

轉載于:https://www.cnblogs.com/pandabunny/p/3270209.html

總結

以上是生活随笔為你收集整理的偷懒的inline-block解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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