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。
本文来自前端观察，转载请以链接形式注明出处。
您或许也会喜欢：
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。
Safari 4和Firefox 3.5 for Mac似乎也有这个问题。不过很奇怪，当使静态的HTML＋CSS inline－block的时候，我给每个div使用margin：－3px来缩小空隙，但是当我用JS动态生成同样的div的时候，空隙没有了，原来的“margin：－3px”反而产生了副效果，结果只好删掉了这一行。当然，最后还是使用了绝对定位，固定宽度，这样才能够和IE兼容。
是不是js生成div的时候代码间没有换行啊。
我本来是要用JS生成一个data grid的。先用静态的HTML＋CSS写出数据列的第一行，用来看看效果的。CSS用的是类似“#datagrid div ｛… ; display: inline-block; …｝”。写完后发现div之间有大约4－5px的空隙，于是加上了“ margin: -3px;”。结果等我用JS动态生成数据行的时候，空隙没有了，“ margin: -3px;”反而使div产生了重叠。很奇怪。后来发现IE都不兼容“inline－block”，于是干脆使用绝对定位了。
试试这种解决方法
在父容器定义font-size:0px;
然后对定义display:inline-block的容器重新定义字体大小试试
我觉得，firefox等标准浏览器的表现是正常的，IE6、7中，li的边框把本是空白的位置给占了才是bug吧？
晕，那边框应该是为了更清晰的看出li 区域而加上去的，可以给 li 添加 background 来替代这个方法。
这种情况我也遇到过，不过，一般也不太会管得到的：
如果是导航的话，那就全部写在一行里边
如果是图片之类的罗列，而且还有高度不一的描述内容的话，inline-block确实比float 好用多了，那么，反正他们之间都要设置间距的，那就随他去吧。
inline-block ——如果我们不考虑兼容 firefox 2.0的话，那“跨浏览器的inline-block”中提到的代码可以简略很多的。基本上只需要 display: inline-block; zoom: 1; *display: inline; 甚至连 为IE6 的那个高我都省去了也不见什么问题。
这并不算Bug的! 呵呵! 空格和换行都是占用一个空格的空间的! 而6px刚好是12/2 = 6px 也就是半个字符高度一个空格的大小. 你可以试试改变其整体的文字大小空的还要多呢! inline 和 inline-block 是有很大不同的. 简单理解 linline 是软的, inline-block 是硬的, 当然我这个解释还有些不恰当, 但一时找不到更好的解释了.
唉，写个css真累……
这不是bug，相邻的inline及inline-block的元素，如果html中存在空格或者换行，就会有一个间距，其实IE没有间距才是bug，就像两相邻的两个a，这样写就没有间距：<a href=”" rel=”nofollow”>asd</a><a href=”" rel=”nofollow”>asdd</a>；这样写就有间距：<a href=”" rel=”nofollow”>asd</a> <a href=”" rel=”nofollow”>asdd</a>或
<a href=”" rel=”nofollow”>asd</a>
<a href=”" rel=”nofollow”>asdd</a>。由于inline-block具有了内联元素的特性，所以这个问题可以通过设置letter-spacing=-4px解决，具体值取决于字体大小。12px字体是-4px。（相当于把inline-block的div或其他元素当做一个字）
letter-spacing=-4px是给外层容器的定义，再对内部的inline-block的元素设置letter-spacing=0px
呃，受教了。
今天再次碰到这个问题，顺便测试了下，貌似是当前字体大小的一半，也就是12px的话，应该是-6px。
测试过chrome吗？对于firefox设置为-100px都没关系，而chrome就会叠起来。我测试的字体大小12px时是-4px 。。。
有时间可以试一下 word-spacing 当然也要在特定条件下，一般情况下应该会比用 latter-spacing 省几个字，呵呵。
ul中li display:inline-block的话
ul{font-size:0}
li{font-size:12px}
测试了一下，这种方式在IE和FF中都是有效的，但是在Chrome中无效。上面的letter-spacing的方法在各浏览器中都有效。
呵呵,研究的很详细啊
这个属性很少用… 我
明察秋毫啊，学习了。。。
letter-spacing这种方式在IE和FF中都是有效的
我改变缩进
唉，可悲啊，当初发现了，就没好好研究，只是用margin：-3px 临时解决了一下，没想到高手们纷纷出招，使我顿悟，路漫漫学无尽啊……
学习了～～
这个不是Bug,空格导致的。。。 可以用float来解决
无标题文档
li{display:inline-block; border:solid 1px red; font-size:30px; float:left}
1 1 11
float當然可以解決，但在很多情況下，就是不想用float才用了inline-block，如果用float，那inline-block就失去意義了，比如一個橫向居中的導航菜單……
我一般用margin-right:-6px;
不知道最完美的是哪种。
今天刚好碰到这个这个问题，受教了，谢谢
空隙和字体也有关系。Arial和Helvetica是-3px,宋体是-6px