讓IE、Firefox、Chrome中的LI都支持display-block的兼容寫法

轉自：http://www.cnblogs.com/langzs/archive/2012/03/08/2385087.html

 

在製作簡易模板時，店招的導航條結構大致如下：

<div class="nav">
    <ul>
        <li><a href="#"><em>首頁</em></a></li>
        <li>...</li>
        ....
    </ul>
</div>

其中，li有一個這樣的屬性

.nav ul li {
display:block;
float:left;
}

這兩個屬性決定了導航條中的導航項目只能是從左至右排列。而我在製作模板的時候想將導航條中的導航項目居中排列，於是做了如下修改：

.nav {
....
text-align:center;
}

.nav ul {
....
margin:0px auto;
}

.nav ul li {
display:inline-block;
float:none;
}

對於.nav和.nav ul的屬性，目的是讓ul在nav中是居中的。.nav ul li 中的解釋如下：

display:inline-block;   //讓普通標籤擁有佈局屬性

float:none; //不再浮動，否則不能居中

結果一經測試發現：在firefox、chrome中均可以正常的看到預期效果，而IE中卻只是看到了一個LI顯示出來。爲LI添加了一背景再行測試，發現：原來LI在IE中佔居了整個UL的寬度。自然是無法再讓這些LI從左至右進行排列了。至此找到了問題的關鍵所在：display:inline-block並沒有讓LI像普通標籤那樣擁有佈局屬性，但是它對span   em    strong等這樣的標籤是有效的。

找到了問題，就要解決問題，於是我想到了display:inline; 再進行測試，發現所有瀏覽器都讓這些LI從左至右了，並沒有居中排列。

那麼能不能讓display:inline隻影響到ie呢？當然可以，至此LI的樣式如下：

.nav ul li {
display:inline-block;
*display:inline;  // for ie
float:none;
}

這樣的寫法，在除firefox和chrome中均能正常居中了。只是IE中還是從左至右排列的順序，我再想到了IE特有的讓一個元素擁有佈局屬性的CSS屬性：zoom:1;。再將代碼改爲如下：

.nav ul li {
display:inline-block;
zoom:1;   //first
*display:inline;   //second
float:none;
}

測試結果發現，一切都正常了。

注意點：zoom:1一定要前，*display:inline一定要在後。否則不能有效。至於爲什麼？因爲它是IE