Firefox Bug: inline/inline-block的间隙
首先要说明的是，这个标题有点标题党的意思，这个 bug 也存在于 IE8 下，在 IE6 和 IE7 下正常。之前写过两篇关于 IE bug 的文章，这里特意用了 Firefox bug 作为标题，是为了给自己找点心里安慰，省得总是埋怨 IE :)。
关于 inline-block，可以参考之前的一篇文章 <a href=”http://www.qianduan.net/cross-browser-inline-block.html”>跨浏览器的inline-block</a>
这个 bug 是“痛在远方”同学碰到的，确实很诡异啊，貌似对标准支持越好的浏览器才会有这个问题。
如下图：
在 Firefox 下，inline/inline-block 的元素直接会有莫名的几像素(貌似是6px)的空隙。这个 bug 比较难发现，因为为了美观，一般的这种设计，inline/inline-block 的元素直接都会有一定的间距，再加上目前的浏览器对 inline-block 这个属性的支持并不是很好，这个属性应用的也不是很频繁。由<a href=”http://www.qianduan.net/cross-browser-inline-block.html”>跨浏览器的inline-block</a>来看，要对浏览器做不少hack，代码量以及方便性上不如直接使用浮动。因此这个 bug 的影响其实不大。
要解决这个 bug，貌似目前没有什么好的方法，只能改变代码的缩进，把换行去掉，整个代码写入一行。
首先要说明的是，这个标题有点标题党的意思，这个 bug 也存在于 IE8 下，在 IE6 和 IE7 下正常。之前写过两篇关于 IE bug 的文章，这里特意用了 Firefox bug 作为标题，是为了给自己找点心里安慰，省得总是埋怨 IE :)。
关于 inline-block，可以参考之前的一篇文章 跨浏览器的inline-block
这个 bug 是“痛在远方”同学碰到的，确实很诡异啊，貌似对标准支持越好的浏览器才会有这个问题。本文来自前端观察，转载请以链接形式注明出处。
如下图：
在 Firefox 下，inline/inline-block 的元素直接会有莫名的几像素(貌似是6px)的空隙。这个 bug 比较难发现，因为为了美观，一般的这种设计，inline/inline-block 的元素直接都会有一定的间距，再加上目前的浏览器对 inline-block 这个属性的支持并不是很好，这个属性应用的也不是很频繁。由跨浏览器的inline-block来看，要对浏览器做不少hack，代码量以及方便性上不如直接使用浮动。因此这个 bug 的影响其实不大。本文来自前端观察，转载请以链接形式注明出处。
要解决这个 bug，貌似目前没有什么好的方法，只能改变代码的缩进，把换行去掉，整个代码写入一行。
具体可以参见 demo。
本文来自前端观察，转载请以链接形式注明出处。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。
关于这个问题，原来很多人不知道啊。呵呵~其实很简单，当原素被转换为inline-block显示的时候，那么该元素会具有inline的一些属性，所以当你在标签之间换行的时候会产生空格，inline-block之间的间距就是一个空格的位置，你要算间隙是几个像素，其实依赖于你的字体设置大小，空格是个字符啊，所以-margin补间距之类的方法不可取，所以大家每个人出来的负值都不一样（-_-!）。空格是由inline-block标签之间换行产生的，那么解决方法简单了，不要在转换为inline-block的标签的代码之间换行就行了，开发人员一定要在精确布局的时候要注意一下。话说这个也不是firefox之类浏览器的bug，inline-block具有inline的一些属性，那么inline标签代码之间换行本来就会有空格产生的；IE倒是奇怪没有产生空格，但是也讲的通。
例子inline元素，在你的编辑器中将下面两个标签之间回车看看产生的空格:hhhhhh
例子inline-block元素代码紧凑点写，就不会在firefox或其他浏览器中有空格了：jjjjjj
哎呀，示例代码被过滤了:从来一下
例子inline元素，在你的编辑器中将下面两个标签之间回车看看产生的空格:<span>hi</span><span>hi</span>
例子把下面的div标签转为inline-block显示代码紧凑点写，之间别换行，就不会在firefox或其他浏览器中有空格了：<div>hoo</div><div>hoo</div>