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元素的表現。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;}
</style>
</head>
<body>
<span>span</span>
</body>
</html>
可以看到在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代碼如下：
li {display:inline-block; /* firefox等標准浏覽器識別*/
*display:inline; /* 只有ie6和ie7識別*/
zoom:1; /* 觸發ie6和ie7下的haslayout */
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}
讓標准浏覽器識別display:inline-block;讓ie6，7識別display:inline;來覆蓋上面的display:inline-block;（我為什麼要說”覆蓋”？）。然後通過zoom:1;來觸發haslayout讓inline元素在ie中表現得和inline-block元素一樣。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
ul {background:#ccc;padding:0;margin:0;list-style:none;}
li {display:inline-block;
*display:inline;
zoom:1;
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}
</style>
</head>
<body>
<ul>
<li>測試</li>
<li>測試</li>
<li>測試</li>
<li>測試</li>
</ul>
</body>
</html>
可以看到，現在在各浏覽器裡面的顯示已經一致了。li元素都顯示在同一行。
不過我上面問了：為什麼要說覆蓋？
假如我們把上面的css代碼中的
1 2display:inline-block;
*display:inline;
兩句調換一下順序會怎樣？你會發現display:inline-block;覆蓋了*display:inline;導致在ie6，7中原先的樣式又失效了，這說明什麼？說明ie6和ie7是認識display:inline-block的，所以我在前面說”不完全支持”而沒有說”完全不支持”，嘿嘿，我可沒有打自己嘴巴。之所以說”不完全支持”是因為還是有一點作用，雖然display:inline-block對ie6，7中的元素表現沒有任何直接影響，但是它會觸發inline元素的haslayout。只有這一個作用，讓我們再回到前面的例子：
span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;
display:inline-block;}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;display:inline-block;}
</style>
</head>
<body>
<span>span</span>
</body>
</html>
可以看到，我們把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的表現。