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。
最新评论