CSS inline-block 属性

如果你有CSS编程经验的话，那么你对 inline-block 这个CSS属性应该不会陌生，inline-block 是 displaly 属性的一个值，但是这个属性IE6还不支持。在IE6下,对制定了float的元素增加margin 或者padding 属性的时候（margin或者padding的方向跟float一样，比如元素同时拥有float:left和margin-left 属性），会使margin或者padding的距离加倍（双边距bug）。当然你可以使用ie hack 来解决这个问题，在ie6下设置有原始值的一半。如果你用inline-block来代替float的话，就能很好的解决这个问题（大多数情况下）

使用inline-block 来代替float 的解决方案或或许是最有效的方法来实现内联块的价值。

inline-block的定义：

一下是来自一些网站关于inline-block的定义

Sitepoint’s

inline-block makes the element generate a block box that’s laid out as if it were an inline box.

QuirksMode:

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

Robert Nyman:

Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.

可以理解为：将对象作为内联来显示，但是里面的内容作为块对象来呈现。（周围元素与其保持同一行，但可以设置宽度跟高度的属性）

什么情况下使用：

• 解决ie6双边距bug
• 在横向类块元素上没有float属性
• 使内联元素能设置宽度跟高度，但是同时保持内联显示
• 使内联元素能设置margin和padding 属性

目前 ie6,ie7 不支持 inline-block。但是可以通过触发haslayout来实现inline-block.

实现方法：

更多的关于这个实现方法可以参考这里