display:inline-block间隙问题
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，更多解决方案 请参考文档
