标签：
说css简单的人，肯定木有深入了解过它，会用不代表懂，更谈不上表精通，用了一年多css的我也只能说一知半解，对css Hack的了解还是不够啊啊啊啊。。。。
就拿inline-block来说，众所周知，它是和相对/绝对定位，float一样可以实现页面布局的一个属性，在页面中【display:inline-block; *display:inline; *zoom:1;】这样的代码更是随处可见，而上面的代码是为了兼容ie6,ie7,但当有人问起为什么要这样写时，惯性思维告诉我“因为ie6,ie7”这样的老古董不兼容，真的是这样么，今天在网上查阅了一些资料。原来，在ie6,ie7中display：inline-block；是可以触发hasLayout 的，触发hasLayout 的元素表现出来的特征就是一个矩形容器，可以给它设置宽高而不受外部因素的影响。类似于现代浏览器中的block formatting contexts(块级格式化上下文)的概念。
当然，这几种布局方式并不能单纯的拿出来比较，说谁更优秀，只有在你实际的应用环境中，根据需要来合理选择布局方案，我们的目的是让浏览器识别我们的代码，更好的还原设 计效果，呈现给用户一个更舒服，更美观的界面。在此，主要分析一下inline-block布局方案:
什么是inline-block?
那inline-block到底是什么呢？顾名思义：inline行，block块，那inline-block后的元素就是格式化为行内元素后的一个块元素。更加直白一点就是说inline-block后的元素既有块元素可以设置宽高的属性，也可以有inline元素不换行的属性，当然inline-block也可以设置vetical-algin属性等。
inline-block引发的问题
所以在这里做一个整理，一方面加深自己对inline-block布局的理解，另一方面，有需要的童鞋也可以参考一下，有好的建议也可以分享一下啦啦啦啦------
话说在正常的浏览器中直接用【display：inline-block;】就可以实现，但在浏览器中的显示并不是我们所预期的那样，每个块儿之间出现了间隙，如下所示：
而正常情况下我们所希望看到的效果是这样的
通过float实现的
从上面的显示效果来看，第一个明显比第二个看着舒服，但并不是任何时候都能满足我们的要求，那问题就来了，我们该如何解决这个间隙的问题呢？
inline-block空白的解决方案
针对这个问题，参考了一些大神的著作，找到了一些解决方案
第一种： 移除空格法
第二种：使用margin负值
.box a{
display:inline-block;
margin-right:-10px;
}
这种办法由于外部环境的不确定性，以及最后一个元素多出的负margin值等问题，这个方法并不适合用于大规模的开发中
第三种： 使用font-size:0清除换行符;
第四种： display:table; 方法 但这种方法在ie6,ie7下是不起作用的；暂时就保留着吧
第五种： 使用letter-spacing和word-spacing清除空隙，但经验证后发现。这两个属性并不能正真的清除空隙，所以还需要与其他属性的结合才能实现我们想要的效果
所以综合一下上面的所有解决方案，可以得到一个终极解决方案如下：
.box{
font-size:0; /*针对所有浏览器*/
*word-spacing: -1px; /* 针对ie6,ie7*/
}
.box a{
font-size:12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and(-webkit-min-device-pixel-ratio:0){
/*fiefox中的letter-spacing会导致脱离普通流的元素水平位移*/
.box{
letter-spacing: -5px; /*Safari等不支持字体大小为0的浏览器，N的大小根据父级字体的大小来调节*/
}
}
.box a{
display: inline-block;
*display: inline;
*zoom:1;
}
其实在YUI3中也用了inline-block来布局，在YUI中是这样解决这个问题的
.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留下的空格，但是这样就破坏了我们页面本身的结构，作为一个程序员来说，估计没人愿意看到像下面这样没有结构的代码吧，所以这种解决
方案就划在解决方案之内了。
结论：
- 产生 inline-block 空隙的根本性原因是：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。
- 慎用 -webkit-text-size-adjust:none，它将会导致页面无法通过缩放来改变字体大小。
布局中的inline-block
标签：
原文地址：http://www.cnblogs.com/lingjuan/p/4439892.html
