display:inline-block感覺與display:table-cell有些相似，例如對(duì)內(nèi)部元素的包裹性。但是，由于display:inline-block最大的不同就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用非常自由，可與文字，圖片混排，可內(nèi)嵌block屬性元素，可以可以置身于inline水平的元素中。可謂黑白通吃，左右逢源。
inline-block屬性的元素適用于inline box模型，所以，當(dāng)其中的列表元素高度不一時(shí)，是不會(huì)有錯(cuò)位的。每一行所有的inline元素和inline-block元素會(huì)共同形成一個(gè)line boxes，這個(gè)line box的高度由里面最高的元素決定。所以，即使inline-block屬性的列表元素高度異常，撐開的是整個(gè)line boxes的高度，因而，不會(huì)與下一行的列表元素發(fā)生錯(cuò)位。如下面的我自己畫得拙劣的示意圖所示的：

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

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表