inline-block对象间的缝隙
11月 7th, 2009
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3.5 / OP10 / SF4 / Chrome2 ]
[操作系统：Windows]
inline-block用于块对象的横向排列（如图片组），其有着一些float不可替代的作用（如不错位、可垂直居中等），但在实际应用中，还是存在一个很纠结的弊端——有缝：
提示：你可以先修改部分代码再运行。
通常情况下，我们需要inline-block的元素是块对象：
提示：你可以先修改部分代码再运行。
大家可以看到缝隙大小不一，而且当对象是块对象时，IE6/7因为是模拟的inline-block，完全没有缝隙。
经肉眼观察和肉手测试，发现这个该死的缝隙与字体和文字大小密切相关，故提供灭缝方法如下：
对象为内联对象时：
提示：你可以先修改部分代码再运行。
对象为块对象时：
提示：你可以先修改部分代码再运行。
在这里回答一个疑问，既然是与字体大小相关，那为什么不直接使用font-size:0，然后在子对象上再进行大小恢复呢？
答：因为即使这样设置了safari和chrome以及为块对象时的ie6和ie7还是有1px的问题，要单独hack，忒麻烦。
总结一下，关键几点：
1. 缝隙的宽度与文字大小相关，你可以把缝隙看作一个文本节点，字越大，缝越大。
2. 这个文本节点是由于换行产生的，故，如果span和span之间或li与li之间不存在换行，那就没必要这么罗嗦了。（为了美丽的排版，我相信多数人会选择换行的）
3. 示例中采用了font-family:simsun，这是因为宋体是等宽字体，这样各浏览器对这个文本节点的宽度就很一致了：0.5em。
为啥我看了还有缝… 除了margin后…
WIN7 FF3.5
哈哈，漏了一个负号。。。。本来写的-6px的，想了想觉得.5em比较合适，谢谢大猫。。
这又是另一种解决方案了！
学习了 多谢!
哦也 鼓掌鼓掌~！
这个去掉换行就可以了吧,没必要那么麻烦吧
很实用的文章。我也想写这方面文章的，但发现你早已先写好了。;)
补充一点吧。
从标准来说，行内块（替换元素）在行框内被视为行内元素，因此根据 CSS 的空白符处理规则，行内元素之间的空白符（空格、回车、Tab 键）应被合并为一个空格。这个缝隙实际上就是行内元素之间的空格，类似于单词之间的空格，所以它的宽度是与字体相关的。我原以为可以用 word-spacing 来处理，但发现比较麻烦，还不如用宋体和负外边距来处理。
那为什么 IE6,7 在某些情况下会自动消灭这个空格？因为实际上 IE6,7 并没有行内块这个概念，我们只是用 hasLayout 的某些特性来模拟行内块。因此，对于那些默认为块元素的元素，在将它们模拟为行内块之后，IE6,7 仍然以块元素的空白符处理规则来处理它们之间的空白符，即忽略；对于那些默认为行内元素的元素，在模拟为行内块之后，IE6,7 就以行内元素的空白符处理规则来处理它们之间的空白符，即合并为一个空格，这恰好与标准是一致的。
所以说，遵守标准的还是非 IE 浏览器，IE 只是在某种情况下碰巧符合我们内心的期望。;)
@birdstudio
很难解释，hasLayout有很多触发方式，包括设定宽度，可是inline-block的模拟却是无法通过这种方式来触发，或许是因为display属性为inline值的对象本身就不支持width属性。
原本想用font-size:0，chrome已经不支持了，没办法，看到99css还有另外一种方法，和你的思路是一致的，利用letter-spacing和word-spacing属性。
说到IE碰巧符合我们的期望，不禁觉得W3C的标准常常还是很蛋疼的，比如无聊的父子margin叠加。
我曾经也碰到过，但当时没有找到该文章，今天竟然被我碰到了，幸运呀。
当时我用的是标签的inline-block，发现中间有空隙，思来想去没找到办法解决，我就加了个float：left,结果没有了。不知这种方法可有漏洞？
@web前端寒风
inline-block和float都能使对象横向排列，但inline-block的方法在多行排列上有很大的优势，比如第一个float的元素比第二个高，排到第二排的时候，就从第二个元素开始排了，会造成错位。
@chomo
恩，貌似会出现这种情况的，看过这类文章，但还没来得及自己试验