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