鑒于inline元素的這種特性，如果我們不浮動(dòng)并且想讓li顯示在一行，而且可以設(shè)置高度，寬度以及上下margin，上下padding等屬性，應(yīng)該怎么辦呢？你一定會(huì)想到一個(gè)屬性display:inline-block;對(duì)！”inline- block”就是干這個(gè)事的，讓一個(gè)元素既不換行又具有block元素的特性。不過(guò)有點(diǎn)小問(wèn)題.

在IE6、IE7中不識(shí)別display:inline-block屬性，加不加display:inline-block;對(duì)于它們完全沒(méi)有任何影響。那么讓我們來(lái)想辦法解決這個(gè)問(wèn)題，這就涉及到ie6，7中的haslayout屬性了。ie6，7中的inline元素有個(gè)特殊的情況，就是觸發(fā)了ie的hasLayout屬性以后就擁有了layout。此時(shí)inline元素的表現(xiàn)和標(biāo)準(zhǔn)瀏覽器里面的inline-block元素基本相同。看下面這個(gè)例子，我們用ie的私有屬性zoom來(lái)觸發(fā)hasLayout，然后看看inline元素的表現(xiàn)。

可以看到在ie6，7中inline元素span已經(jīng)表現(xiàn)得和一個(gè)display:inline-block元素一摸一樣了，但是在標(biāo)準(zhǔn)瀏覽器中span仍然是行內(nèi)元素（寬高以及上下margin都無(wú)效）。

如果聲明了不正確DTD，導(dǎo)致ie6在quirks 模式下解析，那么ie6會(huì)自動(dòng)觸發(fā)inline元素的haslayout，不過(guò)這里只討論正常情況下的解析，所以加了個(gè)zoom:1來(lái)觸發(fā)haslayout;zoom的值設(shè)置為除了auto外的任何值都會(huì)觸發(fā)haslayout，之所以經(jīng)常用zoom:1;是因?yàn)閦oom這個(gè)屬性本身是ie的縮放屬性，設(shè)置為其他值會(huì)導(dǎo)致元素在ie下變形，設(shè)置為1既是保持原形不縮放。

了解了上面的情況，我們就可以來(lái)解決之前那個(gè)問(wèn)題了。可以改原先的css代碼如下：