IE6/IE7不識別display:inline-block屬性怎麼辦
鑑於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″ />
<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元素一樣。
<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>