内联元素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的效果相同。
以上文字装载于http://blog.csdn.net/sunwaymike/article/details/6095190
另对于IE来说,除了上述的问题之外,还有一种处理方法,即:
div {display:inline-block;...}
div {display:inline;}
先设置display为inline-block;接下来设置为inline也可实现相同的效果.