CSS篇之水平导航

关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。

问题：一个最简单的html结构如下，请实现水平导航。

<ul>
    <li>home</li>
    <li>web</li>
    <li>other</li>
</ul>

基础样式：

ul{list-style: none;}
li{width: 80px;height: 30px;background: #7fffd4;color: #fff;text-align: center;line-height: 30px;}
li:hover{background: lightsteelblue;}

方法一：float

ul{overflow: hidden;}
li{float: left;}

优点：兼容性好，所有浏览器版本都能很好的支持；

缺点：需清除浮动避免带来的影响

方法二：display:inline-block

ul{font-size: 0;}
li{display: inline-block;font-size: 14px;}

优点：兼容性好，支持IE8及以上，且不用考虑浮动带来的负面效果；若想支持IE7及以下也容 易，只需添加如下代码：

li{*display: inline;*zoom: 1;}

缺点：列表元素之间会很诡异的有间距，原因是因为标签换行的空白带来的影响，解决方案有两种：1，在父元素设置font-size为0；2，让列表的结束标签与下一个列表的开始标签连在一起，但是这样HTML可读性不好，所以一般采用第一种方法就能很好的解决。

方法三：display:inline

li{display: inline;padding: 7px 20px;}

优点：代码简洁。

缺点：1，和方法2一样，会出现空白间隙，解决方案如上；2，因为是行内元素，所以不能设置宽高，比较局限。

方法四：display:flex/inline-flex

li{display: flex/inline-flex;} //图简单，就这样写啦。。

优点：代码简洁；无副作用影响

缺点：兼容性一般，ie9及以下不支持

在这里说下小小的区别：inline-flex父元素宽度为子元素宽度和；flex为块级元素，默认宽度为父级宽度。当然从名字上也能很容易看出，不过在网上看到inline-flex的文章并不那么多，所知甚微，还请大家补充。

方法五：display:table-cell

ul{display: table;}
li{display: table-cell;}

优点：兼容性较好，IE8及以上都支持

缺点：暂未发现（btw:不加上对父元素设置table好像也没啥影响。加上父元素table，父元素宽度为子元素总宽）

方法六：box-orient

ul{
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
                
    /* Safari、Opera 以及 Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
                
    /* W3C */
    display:box;
    box-orient:horizontal;
}

优点：简单粗暴

缺点：很方便，有木有，但是，毕竟css3属性，目前还没有浏览器支持此属性,firefox、safari、chrome、opera可以通过私有属性来达到效果，IE就苦逼了，并不能。

结语：暂时就这么多。