ie6，ie7的haslayout屬性是個讓人頭疼的問題。在做導航條的時候，一般會用到ul li結構，大多數時候我們是把li設定為浮動，讓其併排顯示在同一行。還有一種方法就是設定li為display:inline;這樣可以達到同樣的效果，但是問題是inline元素的特性：預設無法設定寬度，高度，以及上下margin，（關於padding，情況有點特殊，在ie6，7中 inline元素是無法設定上下padding的，但是在標準瀏覽器裡面是可以設定上下padding的）。
鑑於inline元素的這種特性，如果我們不浮動並且想讓li顯示在一行，而且可以設定高度，寬度以及上下margin，上下padding等屬性，應該怎麼辦呢？你一定會想到乙個屬性display:inline-block;對！」inline- block」就是幹這個事的，讓乙個元素既不換行又具有block元素的特性。不過有點小問題.
在ie6、ie7中不識別display:inline-block屬性，加不加display:inline-block;對於它們完全沒有任何影響。那麼讓我們來想辦法解決這個問題，這就涉及到ie6，7中的haslayout屬性了。ie6，7中的inline元素有個特殊的情況，就是觸發了ie的haslayout屬性以後就擁有了layout。此時inline元素的表現和標準瀏覽器裡面的inline-block元素基本相同。看下面這個例子，我們用ie的私有屬性zoom來觸發haslayout，然後看看inline元素的表現。12
3456
78910
1112
13>
span
可以看到在ie6，7中inline元素span已經表現得和乙個display:inline-block元素一摸一樣了，但是在標準瀏覽器中span仍然是行內元素（寬高以及上下margin都無效）。
如果宣告了不正確dtd，導致ie6在quirks 模式下解析，那麼ie6會自動觸發inline元素的haslayout，不過這裡只討論正常情況下的解析，所以加了個zoom:1來觸發haslayout;zoom的值設定為除了auto外的任何值都會觸發haslayout，之所以經常用zoom:1;是因為zoom這個屬性本身是ie的縮放屬性，設定為其他值會導致元素在ie下變形，設定為1既是保持原形不縮放。
了解了上面的情況，我們就可以來解決之前那個問題了。可以改原先的css**如下：12
3456
78910
li
讓標準瀏覽器識別display:inline-block;讓ie6，7識別display:inline;來覆蓋上面的display:inline-block;（我為什麼要說」覆蓋」？）。然後通過zoom:1;來觸發haslayout讓inline元素在ie中表現得和inline-block元素一樣。12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
>
可以看到，現在在各瀏覽器裡面的顯示已經一致了。li元素都顯示在同一行。
不過我上面問了：為什麼要說覆蓋？
假如我們把上面的css**中的12
display:inline-block;
*display:inline;
兩句調換一下順序會怎樣？你會發現display:inline-block;覆蓋了*display:inline;導致在ie6，7中原先的樣式又失效了，這說明什麼？說明ie6和ie7是認識display:inline-block的，所以我在前面說」不完全支援」而沒有說」完全不支援」，嘿嘿，我可沒有打自己嘴巴。之所以說」不完全支援」是因為還是有一點作用，雖然display:inline-block對ie6，7中的元素表現沒有任何直接影響，但是它會觸發inline元素的haslayout。只有這乙個作用，讓我們再回到前面的例子：12
3456
78910
1112
1314
1516
span
>
span
可以看到，我們把zoom:1換成了display:inline-block以後，在ie6，7中span仍然和firefox等標準瀏覽器下一樣，具有了設定的寬高和上下margin，上下padding。它表現得和display:inline-block同學一樣好，不過這並不是因為display:inline-block這條宣告直接生效了，而是因為display:inline-block觸發了ie的haslayout屬性，使得inline元素具有了inline-block的表現。
IE6,7下的那些坑
lang en charset utf 8 title type text css warp box style head class warp class box div div body html 在ie6 ie7,ie8,chrome,firefox顯示效果 當使box元素為浮動元素時 box...
IE6 7下inline block不起作用
網上查到資料是給元素設定display inline block，再觸發layout，設定display inline 因為所有的瀏覽器都支援inlie。即 div div 原理在下面 寫在前面的話，在我開發css的過程中，我發現很多詭異的問題都是對概念理解有偏差，所以在每篇開始的時候，我都把w3c...
ie67中li下的間隙問題
一 以下是引發此bug的條件 必要條件 li的子元素設定了浮動 例如 本例中的a設定了左浮動 充要條件 ie6 7 li設定了width height zoom 之一 例如 本文中的li設定了width 僅ie7 li設定了padding top padding bottom margin top ...