display:inline-block 是让块级元素变成行内元素 在一行显示，
然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，所以名义上firefox是支持display:inline-block的，除此之外，伟大的chrome、Opera、Safari都能很好地支持。尽管如此，依然还是可以通过hack的手段让ie6、7两位难兄难弟变得温顺，
看段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{ width: 500px; background: #cacaca; margin: 10px auto;}
.box ul{
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.box ul li{
width: 16.6%;
display: inline-block;
*display:inline;
*zoom:1;
text-align: center;
background: #cf2d28;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
很简单 想也能想到出现什么布局，需要解释的是，display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。看下和我们想的是不是一样，
纳尼，按照想的应该全部紧密的排在一行啊，为什么会用空隙；
答案就是：块级元素允许空格出现，换行符在这里包含了换行在内的空格符。
解决方法：1、让代码写在一起，2，在父级元素添加 font-size:0; 然而设置为0后子元素大小都没了，需要在子元素再重新设置字体大小font-size:12px;
<style type="text/css">
.box{ width: 500px; background: #cacaca; margin: 10px auto;}
.box ul{
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
.box ul li{
width: 16.6%;
display: inline-block;
*display:inline;
*zoom:1;
text-align: center;
background: #cf2d28;
margin: 0;
padding: 0;
font-size: 12px;
}
</style>
看下效果
perfect，即使右边有一点没有占全，也是在预算之内，因为100/6=26.6666.... 我们只取26.6%，故会有点空隙。
好的这样做在ie 谷歌 ff等浏览器是没问题了 可是在safari中间隙还是存在，为解决此问题 使用letter-spacing:-Npx 来兼容safari
<style type="text/css">
.box{ width: 500px; background: #cacaca; margin: 10px auto;}
.box ul{
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
letter-spacing: -4px;/*根据不同字号做不同调整*/
word-spacing: -4px;
}
.box ul li{
width: 16.6%;
display: inline-block;
*display:inline;
*zoom:1;
text-align: center;
background: #cf2d28;
margin: 0;
padding: 0;
font-size: 14px;
letter-spacing:normal;
word-spacing:normal;
}
</style>
OK，更多解决方案 请参考文档