学习前端以来发现好多东西需要记忆，但又经常忘记，曾试着把内容记录在word文档中发现有时候又会忘记放在哪不是很方便。看到好多人写博客感觉不错，既可以方便自己查找又可以让其他人浏览以供交流......
废话不多说了，相信学过css的对display肯定不会陌生，我们经常通过设置display的值可以改变元素的表现形式，来达到想要的布局。今天着重看了一下display属性的inline-block的表现，查阅了写资料整理如下，现在来一起看看吧，如有错误还望各位不吝赐教。
设置为inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline
元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。简而言之：
inline-block
后的元素就是一个格式化为行内元素的块容器( Block container
)
该属性值在各浏览器的表现
测试表明：IE6 中 inline 元素只要触发了hasLayout其表现就类似于
inline-block（但IE6并非真支持inline-block）这里设置 display:inline-block; 或者 zoom:1;
等其他属性值可以触发 hasLayout，表现出来是一样的。
IE6 中 block 元素即使触发了 hasLayout 也不能具有 inline-block 元素不换行的特性。想要
block 元素支持 inline-block 元素的特性，我们可以这样做：
.dib-block {
display:inline;
zoom:1;
}
首先让 block 元素转化为 inline 元素，强制其不换行；然后通过 zoom:1 触发hasLayout，使其可以设置宽高。
结合现代浏览器
综上，现代浏览器都支持display:inline-block ，IE6、7 inline 元素也可以达到同样的效果，IE6、7
block 元素需要设置 display:inline; zoom:1; 它们结合在一起便是：
display:inline-block; /* 现代浏览器
+IE6、7 inline 元素 */
*display:inline; /*
IE6、7 block 元素 */
*zoom:1;
为了不让支持 CSS2.1 inline-block 的浏览器 重置为 inline，我们针对 IE6、7 做一个
hack。由于现代浏览器也开始支持 zoom 属性，这里只是希望 IE6、7 中生效，所以还是 hack 一下比较合适。至此产生了我们熟悉的兼容各个浏览器的
inline-block 写法。
1. display:inline-block
后的元素为什么会产生水平空隙，这真的是 bug
吗？
- 现代浏览器中 inline 和 block 元素 display:inline-block 后均会产生水平空隙；
- IE6、7，IE8（Q）模拟 display:inline-block 后分两种情况：
IE6、7，IE8（Q）中：inline 元素会产生空隙，block 元素不会产生空隙。
看看 inline 元素默认的表现情况如何？原来默认就有空隙存在！它们是谁？是空白符（white space）！
而是因为 inline-block 具有inline 元素固有的特性。那么为何 IE6、7 block
元素没有产生空隙呢？其实前面也提到了 IE 的 hasLayout，具有独立性，所以产生 hasLayout 的元素之间表现出来互不影响，这也再次表明 IE6、7 中的 inline-block
不能等同于CSS2.1 中的 inline-block。如果非要说是有 bug，IE6、7 block 元素inline-block 后不产生空隙才是
bug。
去掉空隙
HTML
中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是 受font-size
来控制的，字体大小直接导致 inline 或者inline-block 后元素之间空隙的大小，把 inline-block
元素间的空隙认为总是某个固定大小是错误的。
Chorme
低版本的 chrome 浏览器为了不让文字过小不利于阅读，默认是不支持 font-size:0 的，还好我们有
-webkit-text-size-adjust 这个私有属性来控制，当设为 none 时就支持字体大小为 0 了。我已经记不清楚 chrome
从哪个版本开始支持 font-size:0 了，反正我用chrome 19
是支持了（有知道的朋友，烦请告诉一丝一声，最好有官方更新说明）。但是，-webkit-text-size-adjust:none;
会直接导致页面文字无法缩放，这对于用户来说显然是不友好的。所以-webkit-text-size-adjust:none;
一定要慎用，确保使用的地方没有大面积的文字。
Safari
不支持font-size:0;
处理 Safari 不支持font-size:0 的问题上面已经指出 letter-spacing
是支持负值的，那么这个负值到底取多少合适呢？经过测试得出的结论是：inline-block
产生的空隙与父级元素继承或者设定的
font-family、font-size
有关，通常情况下，12px
大小的 tahoma
字体，inline-block
后元素间产生的空隙（间隙）大约是
5px；
IE
- IE8 以上支持 font-size:0;
- IE6、7 inline 元素 inline-block 后设置 font-size:0 始终有 1px 的空隙。
font-size:0;/* 所有浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0
的浏览器 */
*letter-spacing:normal;
word-spacing:-1px;/*
IE6、7 */
- 第四步：子元素重置回正常值
上述所有操作都是在父元素设置的，那么子元素都会继承这些属性，字体大小为0了，子元素就什么都看不到了，这并不是我们想要的。
同时字符和单词间距我们也要把它重置为默认值。「font-size: 12px; letter-spacing: normal; word-spacing:
normal;」 - 最后：inline-block 更好的复用
去除
inline-block 空隙终极解决方案
.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and
(-webkit-min-device-pixel-ratio:0){
/* firefox 中
letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0
的浏览器, N 根据父级字体调节*/
}
}
.dib {
display: inline-block;
*display:inline;
*zoom:1;
}
其实在YUI
3中也全面运用了 inline-block 作为基础布局，YUI 3 是这样解决的：
.yui3-g {
letter-spacing: -0.31em; /* webkit: collapse white-space
between units */
*letter-spacing: normal; /* reset IE < 8 */
word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space
between units */
}
.yui3-u {
display: inline-block;
zoom: 1; *display: inline; /* IE
< 8: fake inline-block */
letter-spacing: normal;
word-spacing:
normal;
vertical-align: top;
}
显然，这里纯粹使用了 letter-spacing 和 word-spacing 来控制元素间的空隙，局限性极大，-0.31em和-0.43em 只是因为
YUI 3 全局cssfonts.css里设置是：「body { font:13px/1.231
arial,helvetica,clean,sans-serif; }」。
当然，如果你坚持使用把 html 写在一行的方式来达到去除 inline-block
空隙的目的，我只能说：一切以牺牲结构来兼容表现的行为都是耍流氓！所以探讨此种方式去除空隙也将是
本文产生的一些观点如下：
- IE5.5 后开始支持
inline-block， 比
CSS2.1 更早提出 inline-block
的概念并作为所谓的「私有属性值」使用。但是它所支持的
inline-block 不能等同于 CSS2.1
中的
inline-block，IE
5.5、6、7
、8（Q）中
block 元素对 inline-block
支持不完整，因此二者表现出来的效果是不完全一致。 - 产生 inline-block
空隙的根本性原因是：HTML
中的换行符、空格符、制表符等合并为空白符，字体大小不为 0
的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。 - 慎用
-webkit-text-size-adjust:none，它将会导致页面无法通过缩放来改变字体大