从原博客转写文章过来
在做导航条的时候，一般会用到ul li结构，大多数时候我是把li设置为浮动(float=left)，让其并排显示在同一行，最后再清除浮动(clear:both)防止影响后面的元素。
还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下padding的，但是在标准浏览器里面是可以设置上下padding的）。
鉴于inline元素的这种特性，如果我们不浮动并且想让li显示在一行，而且可以设置高度，宽度以及上下margin，上下padding等属性，应该怎么办呢？
在CSS属性中还有一个属性inline-block(行内块元素)，他既是行内元素，又具有块元素的特点，可以设置宽和高。所以我们当然想到用inline-block来实现，但是在这里有一个小问题，ie6和ie7并不完全支持inline-block这个属性值。加不加display:inline-block;对于元素完全没有任何影响。
那么让我们来想办法解决这个问题，这就涉及到ie6，7中的haslayout属性了。ie6，7中的inline元素有个特殊的情况，就是触发了ie的hasLayout属性以后就拥有了layout。此时inline元素的表现和标准浏览器里面的inline-block元素基本相同。看下面这个例子，我们用ie的私有属性zoom来触发hasLayout。
了解了上面的情况，我们就可以来解决之前那个问题了。CSS如下：
li {
display:inline-block; /* firefox等标准浏览器识别*/
*display:inline; /* 只有ie6和ie7识别 所谓的IE Hack*/
zoom:1; /* 触发ie6和ie7下的haslayout */
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}
这样就可以在IE6、7既火狐等浏览器里实现一致的inline-block效果了。
