模拟兼容性的 inline-block 属性

梦里梦外; 2022-08-05 09:00 99阅读 0赞

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

而现在对于 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性（注：原来只有 Opera、Safari 支持），但 IE6、IE7 可以通过触发 [hasLayout][] 来模拟，Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性（这两个属性的比较引用自秦歌的[《display:inline-block的应用两例》][display_inline-block 1]）。

> 在实际应用中 -moz-inline-box 会存在元素间的对齐等问题，虽然 Firefox 还有一个私有属性 [\-moz-box-align][-moz-box-align] 来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说 -moz-inline-stack 的表现更像 inline-block ，这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ，如果一个 display:-moz-inline-stack; 的元素外层元素是 display:inline; 即会使 Firefox 中其包含的链接不可点，这个需要用 position:relative; 来解决。

最终我们模拟的代码如下：

display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持，IE 下触发 inline 元素的 hasLayout*/ display:-moz-inline-stack; /* Firefox 的私有属性，也可以用 -moz-inline-box */ zoom:1; /*IE 下触发 hasLayout*/ *display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/ text-indent:-9999px; *text-indent:0; font-size:0; line-height:0; /* 如需隐藏文字，可用这四个属性 */ /*另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0; */ overflow:hidden; /* 隐藏溢出的内容 */ vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */ width:？px; /*？为任意非auto值*/ height:？px; /*？为任意非auto值*/

扩展阅读：

*  [《display:inline-block的应用两例》][display_inline-block 1]
 *  [《inline-block从入门到精通》][inline-block 1]
 *  [《Cross Browser Support for inline-block Styling》][Cross Browser Support for inline-block Styling]

这篇文章发表2008年4月8日 上午 11:56，并被分类于[HTML/CSS/XML/XSL][HTML_CSS_XML_XSL]，已被 23041 人阅读。 您可以通过订阅 [RSS 2.0][] 跟踪对这篇文章的评论， 也可以[发表您的评论][Link 1]，或者在您自己的网站中 [引用（trackback）][trackback] 该篇日志。

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

文章来源：[http://www.planabc.net/2008/04/08/cross\_browser\_support\_for\_inline-block\_styling/][http_www.planabc.net_2008_04_08_cross_browser_support_for_inline-block_styling]

[inline-block]: http://www.w3.org/TR/CSS21/visuren.html#display-prop
[display_inline-block]: http://www.planabc.net/2007/03/11/display_inline-block/
[hasLayout]: http://old9.blogsome.com/2006/04/11/onhavinglayout
[display_inline-block 1]: http://dancewithnet.com/2008/04/05/examples-of-display-inline-block/
[-moz-box-align]: http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions#-moz-box-align
[inline-block 1]: http://ued.koubei.com/2008/04/05/inline-block%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e7%b2%be%e9%80%9a/
[Cross Browser Support for inline-block Styling]: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
[HTML_CSS_XML_XSL]: http://www.planabc.net/category/html-css-xml-xsl/
[RSS 2.0]: http://www.planabc.net/2008/04/08/cross_browser_support_for_inline-block_styling/feed/
[Link 1]: http://www.planabc.net/2008/04/08/cross_browser_support_for_inline-block_styling/#respond
[trackback]: http://www.planabc.net/2008/04/08/cross_browser_support_for_inline-block_styling/trackback/
[http_www.planabc.net_2008_04_08_cross_browser_support_for_inline-block_styling]: http://www.planabc.net/2008/04/08/cross_browser_support_for_inline-block_styling/