快速业务通道

Firefox Bug: inline/inline-block的间隙

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-01

首先要说明的是,这个标题有点标题党的意思,这个 bug 也存在于 IE8 下,在 IE6 和 IE7 下正常。之前写过两篇关于 IE bug 的文章,这里特意用了 Firefox bug 作为标题,是为了给自己找点心里安慰,省得总是埋怨 IE :)。

关于 inline-block,可以参考之前的一篇文章 跨浏览器的inline-block:

啊,inline-block,挺难琢磨并且迷人的声明上承诺了很多,其实提供了很少。很多次我拿到类似这样的 PSD 文件:

Firefox Bug: inline/inline-block的间隙

就哭了。

一般说来,这种类型的布局是小菜一桩。固定宽度,固定高度,向左浮动就解决了。但是,这个设计中内容的多少是可变的,这就意味着如果这些块中的一些内容比其他的多,就会破坏这个布局。

Firefox Bug: inline/inline-block的间隙

因为第一个展示项比其他项高,第五个项目就相对第一个浮动,而不是位于它下面了。基本上我们想要一个弹性表格的布局,但是适当的,语义标记。

我们以一个无序列表开始这个简单的页面,并把 display 设置为 inline-block:

<ul>
	<li>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" /></li>
...</ul>
<!-- li {     width: 200px;     min-height: 250px;     border: 1px solid #000;     display: inline-block;     margin: 5px; } -->

效果在 Firefox 3, Safari 3 和 opera 中看起来没问题:

Firefox Bug: inline/inline-block的间隙

显然,在垂直排列上有些错误。嗯,也不算错误吧,这是正确的表现,只不过不是我们想要的效果。

这是因为每个 <li> 元素的基线是和其父元素 <ul> 的基线对齐排列的。你要问啥是基线?一图顶千言那:

Firefox Bug: inline/inline-block的间隙

基线就是横贯上面文本的黑线。尽量说的简单点。inline 或者 inline-block 元素默认的 vertical-align 值 就是基线。也就是说元素基线要和她父元素的基线对齐。下面有一个示例:

Firefox Bug: inline/inline-block的间隙

就如所看到的,每个基线都是和文本 ‘This is the baseline.’ 的基线对齐的。文本虽然不在 <li> 内部,但是文本节点的父元素 <ul> 就指出了父元素的基线所在。

总之,修正方法是很简单的: vertical-align: top,这样就能得到一个看起来不错阿网格:

Firefox Bug: inline/inline-block的间隙

但是在 Firefox 2, IE 6 和 7 中,依然无效:

Firefox Bug: inline/inline-block的间隙

从 Firefox 2 入手。

Firefox 2 不支持 inline-block,但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’,这个属性和

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号