在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。
display:inline-block

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

但对于这个属性不是所有浏览器都识别。

支持的浏览器有:Opera、Safari。

但很遗憾,最流行的 IE 和 Firefox 却不支持这个属性(在 Firefox3 版本中将会支持 display:inline-block)。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢?这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症,比如使用这一属性后,text-align 有时候就会有问题,还得改用 Firefox 的私有属性 -moz-box-align 来解决(谢谢 aoao 提供案例)。

建议:最好不要使用 Firefox 私有属性 -moz-inline-box。

或许有朋友会对上面所说的 IE 也不支持 display:inline-block 属性,表示疑问或者反对。说:“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。

其实不然,在IE中对内联元素使用 display:inline-block,IE 是不识别的,但使用 display:inline-block 在 IE 下会触发 layout(如果你对 layout 感觉到陌生,可以参看 old9 翻译的《On having layout》),从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析,也不难理解为什么 IE 下,对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如 Opera 中块元素呈递为内联对象。

延伸一个问题:IE下块元素如何实现 display:inline-block 的效果?

有两种方法:

1、先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容):

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

2、直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。代码如下:

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


共有68 条评论

  1. 1. 头像 Directory Scape

    方法,这是一个我知道但没有去看过的CSS属性,这个属性可以从这里查看,之后文山兄还发了我一个示例页面,果然处理左右表单的代码很简洁,结构简单,兼容性很好。 […]

  2. 2. 再谈inline-block « 葵中剑's Blog – SwordAir.com

    […] 引用怿飞的 display:inline-block的深入理解,对于其中已经提到的这里不再冗叙。这篇文章里,我试图谈论的是网络上对于 inline-block 的一些误解,以及个人对于 inline-block 理解上的一些补充。 […]

  3. 3. 头像 motorcycle shipping companies

    方法,这是一个我知道但没有去看过的CSS属性,这个属性可以从这里查看,之后文山兄还发了我一个示例页面,果然处理左右表单的代码很简洁,结构简单,兼容性很好。 […]

  4. 4. display:inline-block的深入理解 | web设计之路

    […] 转载自怿飞blog http://www.planabc.net/2007/03/11/display_inline-block/ […]

  5. 5. display:inline-block理解 | Designer & Developer

    […] http://www.planabc.net/2007/03/11/display_inline-block/ […]

  6. 6. css解决水平垂直居中对齐-样式解决方案仓库 》 html5jscss

    […] dispaly:inline-block就是让对象显示呈递为内联元素但是对象里的内容作为块对象呈递,深入了解请点击怪飞,他的那篇文章介绍的很详细了。 […]

  7. 7. display:inline-block的深入理解 » w'tribe

    […] display:inline-block的深入理解 Posted in div+css notebook | March 6th, 2012 转自:http://www.planabc.net/2007/03/11/display_inline-block/ […]

  8. 8. 头像 Legend1988

    今天刚好碰到这个问题,看了《on having layout》,得慢慢体会!

  9. 9. inline-block的使用场景 | 奇舞团

    […] 这里推荐几篇关于inline-block的文章: display:inline-block的深入理解 inline/inline-block的间隙(本文来自前端观察) […]

  10. 10. inline-block的使用场景 | 产品经理学院-UCD大全

    […]        display:inline-block的深入理解 […]

  11. 11. YUI3 入门(二)

    […] YUI3的css栅格系统的核心是 display: inline-block;的使用,inline-block这个属性用的不多,主要是由于IE6、IE7不支持(通过hack修正:zoom: 1; *display: inline;),实际上inline-block在布局上非常好用,inline-block结合了内联模型和块状模型的优点,即可设置宽度、高度、边距、外边距的内联元素。关于inline-block,圆心有一篇颇为详细的介绍文章,请猛击《display:inline-block的深入理解》。 […]

  12. 12. 转载-YUI3的css栅格系统解析 | iluther-专注web技术

    […] YUI3的css栅格系统的核心是 display: inline-block;的使用,inline-block这个属性用的不多,主要是由于IE6、IE7不支持(通过hack修正:zoom: 1; *display: inline;),实际上inline-block在布局上非常好用,inline-block结合了内联模型和块状模型的优点,即可设置宽度、高度、边距、外边距的内联元素。关于inline-block,圆心有一篇颇为详细的介绍文章,请猛击《display:inline-block的深入理解》。 […]

  13. 13. IE6/7下display:inline-block解决方案 | HUSTecho

    […] 怿飞博客:display:inline-block的深入理解 w3school:display […]

  14. 14. 头像 51爱健康

    对与IE6、7还是要用float 今天算是把我弄死了,看了淘宝的,也是这样

  15. 15. CSS中的浮动有啥重要的作用 - 开发者问答

    […] 扩展阅读: From: http://www.planabc.net/2007/03/11/display_inline-block/ 回答: […]

  16. 16. 谈谈我对渐进增强的理解(转载) | iamgreen

    […] 1.IE6/7下获得同样的表现,通过加上*display:inline,可以参考这里《display:inline-block的深入理解》 […]

  17. 17. float布局不合理,inline-block时代到来 « 谢振中的Blog

    […] 一年前网上还找不到关于 inline-block 属性的文章,为了方便大家更好的理解该属性,当时总结整理了篇《display:inline-block的深入理解》。 […]

  18. 18. display属性及其对SEO的影响 | 滴洋

    […] 关于这个更多请参考淘宝网怿飞的《display:inline-block的深入理解》一文。 […]

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签