让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