display:inline-block属性是一个很神奇且被低估的属性。inline-block即行内块元素，具体而言就是:将对象呈递为内联对象(inline)，但是对象的内容作为块对象呈递(block)，两旁的内联对象会被呈递在同一行内，允许空格。简而言之就是:inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。

目前浏览器支持情况: 除IE6/7不支持，IE8+及高级浏览器均支持(低版本Firefox私有属性-moz-inline-box也可实现类似效果)

疑问一： IE6/7真的不支持inline-block吗？

答疑：其实从 IE5.5开始IE就支持 inline-block 了，且看微软IE浏览器的说法:

"The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object's height or width."

也就是说:display:inline-block 是可以触发hasLayout的，触发了hasLayout的元素表现出来的特征就是一个独立的矩形容器，可以设置宽高而且不受外部元素的影响. 但推究IE5.5推出时间2000年，而W3C官方提出这一概念则是在2002年，因而 IE5.5及IE6/7所理解的inline-block并不能等同于CSS2.1中的统一概念，因为 IE5.5 比 CSS2.1 更早提出 inline-block 的概念并作为所谓的「私有属性值」使用，所以二者表现出来的效果是不完全一致。

疑问二：IE6/7中行内元素和块状元素都能使用 inline-block 达到预期效果吗？

答疑：对行内元素而言：行内元素已经具有了在同一行并排显示的能力，但不能像块级元素那样设定宽高等属性，因而，IE低版本中行内元素欲达到官方inline-block效果，只需直接设定 display: inline-block 或者 设置 zoom:1 来触发Layout就可以了。

对块状元素而言：block 元素对 inline-block 支持不完整，如果要达到类似的效果，需要先设置为 display:inline，然后使用 zoom:1 等触发hasLayout。(首先让 block 元素转化为 inline 元素，强制其不换行；然后通过 zoom:1 触发hasLayout，使其可以设置宽高)

疑问三：如何看待display:inline-block 后的元素产生水平空隙？

答疑：W3C制定标准中元素设定了这一属性后，元素之间会出现少许水平间隙，经各浏览器测试：在高级浏览器( webkit, o, moz, IE9+)中，无论是块状还是行内元素，设定这一属性后水平间隙均会出现；在IE6/7中，行内元素产生空隙，而块状元素无空隙！

其实元素之间的空隙是空白符( 空格+回车符+换行符+制表符等 )，行内元素默认display也存在这种间隙。

所以这并不是 inline-block 后产生的 bug，而是因为 inline-block 具有 inline 元素固有的特性。那么为何 IE6、7 block 元素没有产生空隙呢？其实前面也提到了 IE 的hasLayout，具有独立性，所以产生hasLayout的元素之间表现出来互不影响，这也再次表明 IE6、7 中的 inline-block 不能等同于 CSS2.1 中的 inline-block。如果非要说是有 bug， IE6、7 block 元素 inline-block 后不产生空隙才是 bug。

疑问四：如何去掉display:inline-block 后的元素产生的水平空隙？

答疑：最简单直观的办法是：删除换行符，在同一行或者前后标签尾首相连。这种办法实用性差。

考虑到 所谓的空格产生的空格符本质上是字符，只不过是一种“只占位不显示内容”的字符，尝试用相关几个属性：font-size、margin负值及letter-spacing 和 word-spacing来解决。

1.设定 font-size: 0

理论上，字符大小由font-size控制，取值越大，空格越大；取值越小，空格越小。

如下图所示：

但font-size:0 这一属性并非所有浏览器都支持：webkit内核浏览器考虑到过小字符不利于阅读，不支持设定的支付大小<12px( -webkit-text-size:none 虽然能实现任意大小的设定，但会直接导致页面文字无法缩放，这对于用户来说显然是不友好的，慎用！); MOZ+O+IE8+内核浏览器能完美支持这一属性; IE6/7能支持但对象之间总存在1px间距。

综上，直接设定font-size:0并不能完美解决这一问题。

2.设定 margin负值

基本思想：设定对象向左偏移空格宽度个值，同时设定父框等值的左内边界( 保证第一个对象不溢出 )。这种方法在所有浏览器中均能看到效果，但考虑到inline-block 产生的空隙与父元素设定的字体及字体大小相关，一方面，相同取值在opera和firefox中并不能实现同其他浏览器相同效果；另一方面，取值不准可能出现对象之间的重叠和覆盖。综上，直接设定margin负值并不能完美解决这一问题。

3.设定letter-spacing 和 word-spacing

letter-spacing可以控制文字间的水平距离，支持负值，可以让文字水平方向上重叠，同时对于彼此不存在空格的块状元素之间不起作用。经测试，在高级浏览器中只要设置得当，完全能实现去除空格的效果。

总结:

»IE5.5 后开始支持 inline-block， 比 CSS2.1 更早提出 inline-block 的概念并作为所谓的「私有属性值」使用。但是它所支持的 inline-block 不能等同于 CSS2.1 中的 inline-block，IE 5.5、6、7 、8(Q)中 block 元素对 inline-block 支持不完整，因此二者表现出来的效果是不完全一致。

»产生 inline-block 空隙的根本性原因是：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。

»慎用 -webkit-text-size-adjust:none，它将会导致页面无法通过缩放来改变字体大小。

» block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；» inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；» font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，webkit内核浏览器无效，其他浏览器都完美去除；» letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。

综上可得出全兼容方案：

父框：

font-size:0;// 所有浏览器

letter-spacing:-5px;// Safari 等不支持字体大小为 0 的浏览器*letter-spacing:normal;word-spacing:-1px;// IE6/7

vertical-align:top

子对象：

letter-spacing: normal;

word-spacing: normal;//清除父元素的继承

另一个不错的解决方案：

.father-wrap { font-size:0;//所有浏览器

*word-spacing:-1px;//IE6、7}.father-wrap .son{ font-size: 12px; letter-spacing: normal; word-spacing: normal; vertical-align:top;}

//firefox 中letter-spacing会导致脱离普通流的元素水平位移

@media screen and (-webkit-min-device-pixel-ratio:0){.father-wrap{ letter-spacing:-npx;//webkit浏览器,n根据父级字体调节}}.son{ display: inline-block; *display:inline; *zoom:1;

}}