理解CSS中 display:inline-block

内联元素display:inline

内联元素特点：排列成一行，元素高、行高、顶部和底部边距不可控制，宽度随其内部文字或图片自动扩展，典型的如<span>, <a>, <strong>等。

块级元素 display:block

块级元素特点：分行排列，默认宽度为父容器的宽度100%，高度，行高，顶部和底部边距可控制。

内联块级元素display:inline-block

内联块级元素是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

可以说兼备内联元素和块级元素的特点。排列成一行，高宽等都可控制。

   对于inline-block来说，目前除了opera, safari浏览器支持inline-block,其他IE8,IE7,IE6等版本的IE浏览器，Firefox3.0以前版本浏览器等等，均不支持inline-block。

   但由于IE下有hasLayout属性，当样式里存在display:inline-block时，会激发它自身的hasLayout，从而表现inline-block的特点，这里我们可以使用{display:inline;zoom:1}来验证,得到的效果跟IE下使用display:inline-block的效果相同。