ie6，ie7的haslayout屬性是個讓人頭疼的問題。在做導(dǎo)航條的時候，一般會用到ul li結(jié)構(gòu)，大多數(shù)時候我們是把li設(shè)置為浮動，讓其并排顯示在同一行。還有一種方法就是設(shè)置li為display:inline;這樣可以達到同樣的效果，但是問題是inline元素的特性：默認無法設(shè)置寬度，高度，以及上下margin，（關(guān)于padding，情況有點特殊，在ie6，7中 inline元素是無法設(shè)置上下padding的，但是在標準瀏覽器里面是可以設(shè)置上下padding的）。
鑒于inline元素的這種特性，如果我們不浮動并且想讓li顯示在一行，而且可以設(shè)置高度，寬度以及上下margin，上下padding等屬性，應(yīng)該怎么辦呢？你一定會想到一個屬性display:inline-block;對！”inline- block”就是干這個事的，讓一個元素既不換行又具有block元素的特性。不過有點小問題.
在IE6、IE7中不識別display:inline-block屬性，加不加display:inline-block;對于它們完全沒有任何影響。那么讓我們來想辦法解決這個問題，這就涉及到ie6，7中的haslayout屬性了。ie6，7中的inline元素有個特殊的情況，就是觸發(fā)了ie的hasLayout屬性以后就擁有了layout。此時inline元素的表現(xiàn)和標準瀏覽器里面的inline-block元素基本相同。
看下面這個例子，我們用ie的私有屬性zoom來觸發(fā)hasLayout，然后看看inline元素的表現(xiàn)。
<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 style=”font-family:宋體,微軟雅黑,Verdana,Helvetica”>span</span> </span>
<span style=”font-family:宋體,微軟雅黑,Verdana,Helvetica”></body> </span>
<span style=”font-family:宋體,微軟雅黑,Verdana,Helvetica”></html></span>
可以看到在ie6，7中inline元素span已經(jīng)表現(xiàn)得和一個display:inline-block元素一摸一樣了，但是在標準瀏覽器中span仍然是行內(nèi)元素（寬高以及上下margin都無效）。
如果聲明了不正確DTD，導(dǎo)致ie6在quirks 模式下解析，那么ie6會自動觸發(fā)inline元素的haslayout，不過這里只討論正常情況下的解析，所以加了個zoom:1來觸發(fā)haslayout;zoom的值設(shè)置為除了auto外的任何值都會觸發(fā)haslayout，之所以經(jīng)常用zoom:1;是因為zoom這個屬性本身是ie的縮放屬性，設(shè)置為其他值會導(dǎo)致元素在ie下變形，設(shè)置為1既是保持原形不縮放。
了解了上面的情況，我們就可以來解決之前那個問題了。可以改原先的css代碼如下：
li <span style=”font-family:宋體,微軟雅黑,Verdana,Helvetica”>{</span>
新聞熱點
疑難解答
