css布局之inline-block

      说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，它将会导致页面无法通过缩放来改变字体大小。