在使用 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. 头像 omiga

    up~···

  2. 2. 口碑网UED Team » inline-block从入门到精通

    [...] 关于inline-block的详细分析可以参考学鹍的CSS{display:inline-block}或者圆心的display:inline-block的深入理解 [...]

  3. 3. 头像 fisher

    我在百度搜 inline-block,第一个就是兄弟你的。

  4. 4. 头像 怿飞

    @fisher 可以顺便看下《模拟兼容性的 inline-block 属性》那或许会用得着!

  5. 5. 头像 幕幕

    谢谢了,我设置了display:inline;之后没办法设置width属性,还好看到你这篇文章

  6. 6. 头像 jskin

    不错,刚用到你所说的,学习了!谢谢你的奉献!

  7. 7. 头像 calm

    看过以后,其实我还是很晕的。

  8. 8. 头像 裙角飞扬

    刚搜了下 第一个就是你的 以后常来啊 希望可以多学知识。

  9. 9. [FeedBack] 有趣而诡异的数组 > Feed博客聚合

    [...] 始终等于 0,当时有点迷惑,后来才知道这就像大家认为 IE 中支持 CSS 属性 display:inline-block [...]

  10. 10. 跨浏览器的inline-block | 前端观察

    [...] 翻译:On having layout display:inline-block的深入理解 [...]

  11. 11. 头像 脚本爱好者

    study

  12. 12. 头像 统一查询网

    不错,学习了,css确实很烦。

  13. 13. 头像 14px

    那么怎么证明IE6/IE7不是只是对inline-block支持不完整呢?

    inline-block可以触发hasLayout,而且我不认为一个浏览器本身都不支持的属性会触发它所自带的属性。

    http://msdn.microsoft.com/en-us/library/ms530751.aspx
    在这份资料里,“New for ie8”的内容都已被标识出,是否可以证明在ie8以下的时代就已经支持了inline-block属性?

  14. 14. 头像 14px

    唔…表述有误,补充一下,inline-block是个值,而不是个属性。

  15. 15. 头像 股吧

    还不知道,ie对css声明这里存在这样的bug!!学习了!!!

  16. 16. 头像 vapour

    非常不错。不过介绍的两种在IE中实现inline-block的方法只适用于IE6和IE7。IE8本身就支持display:inline-block

  17. 17. » display:inline-block的几个应用及bug- WEB前端开发- 专注前端开发,关注用户体验

    [...] 怿飞的display:inline-block的深入理解和模拟兼容性的 inline-block 属性; [...]

  18. 18. PureCSS » Blog Archive » 跨浏览器的inline-block

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

  19. 19. AilinTao' Diary » 兼容的display: inline-block

    [...] 1; } 原理参阅:     1: http://dancewithnet.com/2007/10/30/css-display-inline-block/    2: http://www.planabc.net/2007/03/11/display_inline-block/    3: http://www.planabc.net/2008/04/08/cross_browser_support_for_inline-block_styling/ [...]

  20. 20. 跨浏览器的inline-block| CSS| 前端观察

    [...] 翻译:On having layout display:inline-block的深入理解 [...]

  21. 21. span元素的width问题 | 每一天,为明天

    [...] display:inline-block,意思是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。这个属性在 Firefox3 beta、IE8 beta、Opera、Safari 中得到支持。Firefox中有私有属性Firefox 下却有私有属性 -moz-inline-box 可是实现“神似”的功能(不完美,会有后遗问题,比如 text-align 不好用,需要用-moz-box-align来调整。感谢怿飞的文章《display:inline-block的深入理解》)。 [...]

  22. 22. 头像 shevchenko

    上述的两个方法是针对IE6和IE7,现在IE8也出来了,改如何解决!

  23. 23. 日落旅馆 » display:inline-block再总结

    [...] 其中,Firefox3 beta、IE8 、Opera、Safari 支持display:inline-block属性,而IE6/IE7/FF2不识别。通过display:-moz-inline-stack;可以使FF2支持display:inline-block。 而对IE6/IE7先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,可使块元素呈递为内联对象,从而实现类似display:inline-block;的效果。见怿飞的分析 [...]

  24. 24. Moming25's Labs » Blog Archive » display:inline-block

    [...] display:inline-block的深入理解 display:inline-block的应用两例 模拟兼容性的 inline-block 属性 跨浏览器的inline-block [...]

  25. 25. 头像 米拉之落

    释疑了。如果是作为块对象呈递的话,会不会影响到中文分词或者搜索引擎对链接的分析呢?

  26. 26. 头像 momo's

    仔细实验过
    第一个方法在IE8下不能实现,遨游却可以,同样IE 6,7也可以
    display:inline-block IE8支持了 遨游又不行了

    我头大了

  27. 27. display属性和display属性对SEO的影响 | 微物之神

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

  28. 28. 头像 压滤机

    两个display 要先后放在两个 CSS 声明中才有效果?
    是在两个CSS里使用?
    这样的话,还不烦死啊

  29. 29. 头像 雅趴网

    楼上说的对啊。作者写的这句话有歧义。是声名两个,还是放在两个CSS里面????都没说清楚。

  30. 30. ZDN » inline-block,ie layout

    [...] inline元素不可以设置line-height ,inline-block可以设置,但是不会换行; IE中对内联元素使用 display:inline-block,IE 是不识别的,但使用 display:inline-block 在 IE 下会触发 layout,从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析,也不难理解为什么 IE 下,对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如 Opera 中块元素呈递为内联对象。—-《display:inline-block的深入理解》怿飞 [...]

  31. 31. 头像 wkaifang

    inline-block,目前市面上所有的浏览器都支持,但是表现上或多或少有一些差异。

  32. 32. 头像 wkaifang

    我的理解就是 inline-block,目前市面上所有的浏览器都支持,但是表现上或多或少有一些差异。就好比元素的宽度在IE6下和在其他浏览器下不同一个道理。

  33. 33. display:inline-block的深入理解 « Zebo Yeung

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

  34. 34. carlos » display:inline-block的深入理解

    [...] 下午 14:45,并被分类于HTML/CSS/XML/XSL,已被 32990 人阅读。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论, 也可以发表您的评论,或者在您自己的网站中 [...]

  35. 35. inline-block从入门到精通 « Koubei UED

    [...] 关于inline-block的详细分析可以参考学鹍的CSS{display:inline-block}或者圆心的display:inline-block的深入理解 [...]

  36. 36. 头像 maomao

    我感觉还是没明白什么意思,display:inline-block; 这是什么意思?

  37. 37. 页面制作中表单页的问题 | 寒山飒飒风

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

  38. 38. 什么时候多了这个出来style=”display:inline-block” - .net常见问题 - 什么时候多了这个出来style display inline block .NET技术 ASP.NET - 123Doing

    [...] 有人能解答下吗 display:inline-block的深入理解 [...]

  39. 39. 头像 石膏粉

    这个属性可以从这里查看,之后文山兄还发了我一个示例页面,果然处理左右表单的代码很简洁,结构简单,兼容性很

  40. 40. Cross-Browser Inline-Block - ZeroZ

    [...] 相关阅读:display:inline-block的深入理解 分享到:分享到新浪微博分享到Twitter分享到人人网分享到QQ空间 [...]

  41. 41. 头像 Lynn

    已被 32990 人阅读

    这篇文章方便了不少人~

  42. 42. 头像 小花

    看了之后,我也很晕乎的啊,,,display:inline-block是什么意思,还不懂,问百度,也没看到??晕啊…………

  43. 43. 谈谈我对渐进增强的理解 | 容颜八月_More than 2/7 Vegetarian

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

  44. 44. display-inline-block的深入理解 - Dream step

    [...] 下午 14:45,并被分类于HTML/CSS/XML/XSL,已被 32990 人阅读。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论, 也可以发表您的评论,或者在您自己的网站中 [...]

  45. 45. display-inline-block的深入理解 - Dream step

    [...] 32990 人阅读。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论, 也可以发表您的评论,或者在您自己的网站中 引用(trackback) 该篇日志。 [...]

  46. 46. 头像 81%

    “其实不然,在IE中对内联元素使用 display:inline-block,IE 是不识别的,但使用 display:inline-block 在 IE 下会触发 layout(如果你对 layout 感觉到陌生,可以参看 old9 翻译的《On having layout》),从而使内联元素拥有了display:inline-block 属性的表症。”
    我试了下,在IE6、IE7下是 “拥有了display:inline-block 属性的表症” 的,内联拥有这些表症后,就可以设置width,height什么的,已经达到使用的目的了,而且事实也是可以使用了。为什么还说不识别呢? 求解

  47. 47. Inline – which put: in-depth understanding

    [...] Sources:Yi fly Blog [...]

  48. 48. 头像 missyour

    很好看了有用!

  49. 49. 头像 zendwang

    不错,写的通俗易懂。。支持

  50. 50. 头像 tamen365

    触发块元素的 layout到底啥意思,求解!!!!

  51. 51. 头像 Directory Scape

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

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

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

  53. 53. 头像 motorcycle shipping companies

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

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

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

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

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

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

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

  57. 57. 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/ [...]

  58. 58. 头像 Legend1988

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

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

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

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

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

  61. 61. YUI3 入门(二)

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

  62. 62. 转载-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的深入理解》。 [...]

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

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

  64. 64. 头像 51爱健康

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

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

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

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

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

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

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

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

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

发表评论

(必填)

(必填,会为您保密)

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