display:inline-block感覺與display:table-cell有些相似，例如對內(nèi)部元素的包裹性。但是，由于display:inline-block最大的不同就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用非常自由，可與文字，圖片混排，可內(nèi)嵌block屬性元素，可以可以置身于inline水平的元素中?？芍^黑白通吃，左右逢源。

inline-block屬性的元素適用于inline box模型，所以，當(dāng)其中的列表元素高度不一時，是不會有錯位的。關(guān)于line box模型，我在之前的“css行高line-height的一些深入理解及應(yīng)用”第二部分提到了，以及前面“CSS float浮動的深入研究、詳解及拓展(一)”一文的“浮動的破壞性”部分中做過比較詳細(xì)的介紹。一言以蔽之，就是每一行所有的inline元素和inline-block元素會共同形成一個line boxes，這個line box的高度由里面最高的元素決定。所以，即使inline-block屬性的列表元素高度異常，撐開的是整個line boxes的高度，因而，不會與下一行的列表元素發(fā)生錯位。如下面的我自己畫得拙劣的示意圖所示的：

 

根據(jù)一些前輩的說法，IE6/7不支持display:inline-block屬性，只是可以讓標(biāo)簽有類似于inline-block的屬性，起初我也是接受這種說法的，不過后來又表示了懷疑，最近使用text-align:justify;做測試的時候的一些樣式表現(xiàn)證實了：確實IE6/7是不支持display:inline-block屬性，只是讓其表現(xiàn)的跟inline-block一樣，尤其對于inline水平的元素，其表現(xiàn)度可以用perfect一詞來形容了。

對于IE8+以及現(xiàn)代瀏覽器，直接使用：

{display:inline-block;}
就可以了，支持任意水平的元素。

對于不支持的IE6/7瀏覽器該怎么辦呢？如果是inline水平的元素（如a標(biāo)簽，span標(biāo)簽之類）跟上面一樣，直接：

{display:inline-block;}
就可以了，對于這兩個瀏覽器，其功效與*zoom:1;是一樣的。

如果是block水平的元素，例如li標(biāo)簽。則需要多點代碼，目前我知道的方法有兩個，如下所示：

li {display:inline-block;...}
li {display:inline;}
或者是：

li{display:inline; zoom:1;...}
block水平的inline-block化的元素與inline水平的在表現(xiàn)層又是有差異的，這個后面會談到。