如何解決IE6/IE7不識別display:inline-block屬性
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元素的表現 。
復制代碼代碼如下:
html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titledisplay-block/title
style
span {
width:200px;
height:50px;
margin:10px;
padding:20px;
background:#ccc;
zoom:1;
/style
/head
body
spanspan 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已經表現得和一個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 span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"{/span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"display:inline-block; /* firefox等標準瀏覽器識別*/ /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"*display:inline; /* 只有ie6和ie7識別*/zoom:1; /* 觸發ie6和ie7下的haslayout */ /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"width:80px; /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"height:20px; /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"margin:10px; /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"padding:10px; /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"text-align:center; /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"background:#cfc; /span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"}/span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px" 讓標準瀏覽器識別display:inline-block;讓ie6，7識別display:inline;來覆蓋上面的display:inline-block;（我為什么要說覆蓋？） 。然后通過zoom:1;來觸發haslayout讓inline元素在ie中表現得和inline-block元素一樣 。/span
/span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"html xmlns=http://www.w3.org/1999/xhtml /prepre name="code" class="html"head /prepre name="code" class="html"meta http-equiv=Content-Type content=text/html; charset=utf-8 / /prepre name="code" class="html"titledisplay-block/title /prepre name="code" class="html"style /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"ul {/pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"background:#ccc;/pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"padding:0;/pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"margin:0;/pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"list-style:none;/pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"} /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"li {/pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"display:inline-block; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"*display:inline; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"zoom:1; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"width:80px; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"height:20px; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"margin:10px; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"padding:10px; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"text-align:center; /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"background:#cfc;/pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html" } /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"/style /prepre name="code" class="html"/head /prepre name="code" class="html"body /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"ul /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"li測試/li /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"li測試/li /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"li測試/li /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"li測試/li /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"/ul /pre
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"/span/spanpre name="code" class="html"/body /prepre name="code" class="html"/html/prespan style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"可以看到，現在在各瀏覽器里面的顯示已經一致了 。li元素都顯示在同一行 。/span
span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"a target="_blank" http://www.poluoluo.com/jzxy/201206/167493.html/a
/span
