关于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 在这种情况下，空白符自然占据一定的宽度，从而产生元素之间的间隙。

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