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