inline-block在IE6、7下的用法

    在做導航條的時候，一般會用到ul li結構，大多數時候我是把li設定為浮動(float=left)，讓其並排顯示在同一行，最後再清除浮動(clear:both)防止影響後面的元素。
    還有一種方法就是設定li為display:inline;這樣可以達到同樣的效果，但是問題是inline元素的特性：預設無法設定寬度，高度，以及上下margin，（關於padding，情況有點特殊，在ie6，7中 inline元素是無法設定上下padding的，但是在標準瀏覽器裡面是可以設定上下padding的）。
    鑒於inline元素的這種特性，如果我們不浮動並且想讓li顯示在一行，而且可以設定高度，寬度以及上下margin，上下padding等屬性，應該怎麼辦呢？

    在CSS屬性中還有一個屬性inline-block(行內塊元素)，他既是行內元素，又具有塊元素的特點，可以設定寬和高。所以我們當然想到用inline-block來實現，但是在這裡有一個小問題，ie6和ie7並不完全支援inline-block這個屬性值。加不加display:inline-block;對於元素完全沒有任何影響。

    那麼讓我們來想辦法解決這個問題，這就涉及到ie6，7中的haslayout屬性了。ie6，7中的inline元素有個特殊的情況，就是觸發了ie的hasLayout屬性以後就擁有了layout。此時inline元素的表現和標準瀏覽器裡面的inline-block元素基本相同。看下面這個例子，我們用ie的私人屬性zoom來觸發hasLayout。

    瞭解了上面的情況，我們就可以來解決之前那個問題了。CSS如下：     

li {
display:inline-block;    /* firefox等標準瀏覽器識別*/
*display:inline;      /* 只有ie6和ie7識別 所謂的IE Hack*/
zoom:1;               /* 觸發ie6和ie7下的haslayout */
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}

這樣就可以在IE6、7既Firefox等瀏覽器裡實現一致的inline-block效果了。