Comments on: Firefox Bug: inline/inline-block的间隙

By: boston

boston — Tue, 22 Feb 2011 18:06:27 +0000

哎呀，示例代码被过滤了:从来一下
例子inline元素，在你的编辑器中将下面两个标签之间回车看看产生的空格:hihi
例子把下面的div标签转为inline-block显示代码紧凑点写，之间别换行，就不会在firefox或其他浏览器中有空格了：

hoo

By: boston

boston — Tue, 22 Feb 2011 17:58:01 +0000

关于这个问题，原来很多人不知道啊。呵呵~其实很简单，当原素被转换为inline-block显示的时候，那么该元素会具有inline的一些属性，所以当你在标签之间换行的时候会产生空格，inline-block之间的间距就是一个空格的位置，你要算间隙是几个像素，其实依赖于你的字体设置大小，空格是个字符啊，所以-margin补间距之类的方法不可取，所以大家每个人出来的负值都不一样（-_-!）。空格是由inline-block标签之间换行产生的，那么解决方法简单了，不要在转换为inline-block的标签的代码之间换行就行了，开发人员一定要在精确布局的时候要注意一下。话说这个也不是firefox之类浏览器的bug，inline-block具有inline的一些属性，那么inline标签代码之间换行本来就会有空格产生的；IE倒是奇怪没有产生空格，但是也讲的通。
例子inline元素，在你的编辑器中将下面两个标签之间回车看看产生的空格:hhhhhh
例子inline-block元素代码紧凑点写，就不会在firefox或其他浏览器中有空格了：jjjjjj

By: wentis

wentis — Wed, 12 Jan 2011 11:11:08 +0000

都是牛人！

By: 苏昊

苏昊 — Thu, 30 Dec 2010 08:08:50 +0000

跟你得到相同结论啦，不过最终解决了。letter-spacing: -0.34em;word-spacing: -0.3em; 字体是Tahoma，字体不同的话，数值也是不同的。

By: uxfan

uxfan — Mon, 22 Nov 2010 15:40:00 +0000

letter-spacing:-1em; 这个解决方案怎么样呢

By: 李杰

李杰 — Thu, 04 Nov 2010 02:29:17 +0000

刚好碰到这问题
给外层容器定义letter-spacing=-4px，再对内部的inline-block的元素设置letter-spacing=0

By: cqiliang

cqiliang — Fri, 29 Oct 2010 07:44:12 +0000

设置font-size方式在safari和chrome中不行，看样式时因为他们font-size没法设0，只能1px，而letter-spacing在opera中也无效。

By: riant

riant — Tue, 19 Oct 2010 15:38:35 +0000

晕哦，inline-block 我发现我很常用哦，不用清除浮动，能直观的吧父层撑开，这个空隙的bug嘛，关照程序将循环写在一行里就是了，不过代码就很脆弱了，下次试试 font-size:0; : )

By: aaaa

aaaa — Wed, 28 Jul 2010 01:21:54 +0000

空隙和字体也有关系。Arial和Helvetica是-3px,宋体是-6px

By: robin

robin — Wed, 23 Jun 2010 08:31:55 +0000

今天刚好碰到这个这个问题，受教了，谢谢