display:inline-block 間隙

IE6/7是不支持display:inline-block屬性，只是讓其表現的跟inline-block一樣，尤其對於inline水平的元素，其表現度可以用perfect一詞來形容了。

對於IE8+以及現代瀏覽器，直接使用：{display:inline-block;}就可以了，支持任意水平的元素。

對於不支持的IE6/7瀏覽器該怎么辦呢？

如果是inline水平的元素（如a標簽，span標簽之類）跟上面一樣，直接：{display:inline-block;}就可以了，對於這兩個瀏覽器，其功效與*zoom:1;是一樣的。

如果是block水平的元素，例如li標簽。則需要多點代碼，目前我知道的方法有兩個，如下所示：li {display:inline-block;*display:inline;*zoom:1}

 

 

display:inline-block布局的元素在chrome下會出現幾像素的間隙，原因是因為我們在編輯器里寫代碼的時候，同級別的標簽不寫在同一行以保持代碼的整齊可讀性，即inline-block布局的元素在編輯器里不在同一行，即存在換行符，因此這就是著名的inline-block“換行符/空格間隙問題”。如果inline-block元素間有空格或是換行產生了間隙，那是正常的，應該的。如果沒有空格與間隙才是不正常的（IE6/7 block水平元素）。

為了避免出現間隙，提供以下幾種解決辦法，這幾種方法靈活運用：

代碼實例：

li{display:inline-block;}

<ul>

　　<li>

　　　　<span>...</span>

　　</li>

　　<li>

　　　　<span>...</span>

　　</li>

</ul>

 

1.給 li 寫font-size:0

2.把li標簽寫到一行，不要在編輯器里敲回車換行，但是這種寫法對於標簽很多的情況可讀性太差，適用與例如<a></a><a></a>這樣簡單的結構

3.把li的標簽改成這樣的寫法

<li>
    <span>...</span>
</li><li>
    <span>...</span>
</li>


如果想深度了解display:inline-block 推薦閱讀：http://www.zhangxinxu.com/wordpress/?p=1194