display:inline-block

1使用

   （1） display:inline-block可以用来处理行内元素不等高对齐排列问题（列表布局），防止出现过高元素下方没有元素排列，而是被挤到该元素的右下方。（vertical-align: top/bottom;设置对齐的基准线）

  （2）修正IE6中浮动元素的双边距问题

  （3）水平放置多个类似块blo ck元素而不需要使用float

  （4）使一个inline元素具有高宽边距而其依然能够保持inline

 

2. 水平间隙问题

    关于使用display:inline-block带来的水平间隙问题，产生该水平间隙的原因主要是HTML中的换行符、空格符、制表符等合并为空白符，在字体不为0的情况下，空白符将会产生一定的宽度，即产生了元素间的水平间隙。

    解决该水平间隙的方法有：（1）字体大小设置为0，即font-size:0；此时要注意父元素字体大小设置后会影响到子元素字体大小，要记得将子元素字体大小重置！（2）合理地设置letter-spacing的值（负值）！（3）合理地设置word-spacing的值（负值）！（4）前一个标签的结束标签和后一个标签的开始标签连续使用，或者后一个嵌套标签的结束标签连续使用，不空格！合理的使用（1）（2）（3）（4）的css hack可以解决display:inline-block后元素间的水平间隙问题。

 

3. IE下实现display:inline-block的方法

    （1）先使用display:inline-block触发块元素，然后再定义display:inline，让块元素呈递为内联对象。两个display要放在两个css声明中才能生效。

    div {display:inline-block;...} 
    div {display:inline;}

    （2）直接让块元素设置为内联对象display:inline;再触发layout，如zoom：1；

    div {display:inline; zoom:1;...}