关于inline-block解读

在我们写代码的时候估计很多人都会遇到inline-block问题。IE6、7 真的不支持 display:inline-block 吗？其实从IE5.5就开始支持了。下面简要说下吧：

再说line-block之前建议大家先去了解下inline、block和inline-block的区别吧，前面的文章有讲过。

关于inline-block还是拿实例来说明吧【下面只是讲总结实用性的，如果你想了解更详细的，可以去淘宝UED了解】

HTML代码：

1. <div class="box">

2.    <ul class="box-font dib-wrap">

3.        <li class="dib">百度</li>

4.        <li class="dib">谷歌</li>

5.        <li class="dib">QQ彩票</li>

6.        <li class="dib">我的彩票</li>

7.    </ul>
   

8.    <div class="box-font dib-wrap">
   

9.        <a href="#" class="dib">百度</a>

10.        <a href="#" class="dib">谷歌</a>

11.        <a href="#" class="dib">QQ彩票</a>

12.        <a href="#" class="dib">我的彩票</a>

13.    </div>

14. </div>

CSS部分：

body,ul,li,div{font-size:12px;padding:0;margin:0;}
ul,li{list-style:none;}
.box{margin:25px auto;width:450px;border:solid #ccc 1px;padding:25px;}
.box-font{height:50px;white-space:nowrap;}
.box-font li{display:inline-block;width:80px;height:28px;line-height:28px;text-align:center;border:solid #666 1px;background:#f5f5f5;}
.box-font a{display:inline-block;width:80px;height:28px;line-height:28px;text-align:center;border:solid #aaa 1px;background:#f5f5f5;}
.dib-wrap{
font-size:0;
*word-spacing:-1px;  /* 针对IE6、7像素偏差 */
letter-spacing:-5px; /* 有时候可以省略 */
*letter-spacing:0;    /* 有时候可以省略 */
}
.dib-wrap .dib{
font-size:12px;    
*display:inline;    /* IE6、7 block 元素 */

*zoom:1;    /* 现代浏览器 +IE6、7 inline 元素 */
word-spacing:normal;
vertical-align:top;
letter-spacing:normal;    /* 有时候可以省略 */
}

详细代码请看：DEMO

说明：

1、inline-block 产生的空隙与父级元素继承或者设定的 font-family、font-size 有关，通常情况下，12px 大小的 tahoma 字体，inline-block 后元素间产生的空隙（间隙）大约是 5px；所以letter-spacing的值要根据你的字体大小和样式来定。

2、产生 inline-block 空隙的根本性原因是：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。