display:inline-block在Chrome与FF下导致的间隙

最近在写一个提醒框的时候，使用了display: inline-block的样式，在IE中使用正常，但在chrome与firefox中发现存在空隙。
几经折磨，试了无数种可能性，如查找margin是否有问题之类，甚至设置margin值为负数的操作，虽能奏效，却不甚满意。
最后发现，这个应该与标签的写法存在关系。
代码1：

1 2 3 4 5 6 7 8 9 10 11 12 13

< body > < div > < span >T-L</ span >< span >T-C</ span >< span >T-R</ span > </ div > < div > < span >M-L</ span > < span >M-C</ span > < span >M-R</ span > </ div > < div > < span >B-L</ span >< span >B-C</ span >< span >B-R</ span > </ div > </ body >

在使用这段代码时会发现top和bottom部分都是正常的，却只在middle部分显示存在空隙。
经过给middle部分每个span加个border样式追踪，发现每个宽度都是正常，所以怀疑可能跟标签的写法存在关系。
再继续看代码2：

1 2 3 4 5 6 7 8 9 10 11

< body > < div > < span >T-L</ span >< span >T-C</ span >< span >T-R</ span > </ div > < div > < span >M-L</ span >< span >M-C</ span >< span >M-R</ span > </ div > < div > < span >B-L</ span >< span >B-C</ span >< span >B-R</ span > </ div > </ body >

果不其然，这样书写的时候就能解决掉空隙的问题了。后来专门搜索了下，发现有这方面的介绍。
这个问题存在于display: inline-block的样式中，原因未知，谁让浏览器天下纷争呢。
根据别的文章介绍，还有其它多种解决方法，不过不一一说了，除了下面这个我认为是最适合的以外，其它都是在标签的写法上来寻找突破，且多是使用和取消关闭标签的方法，也实在是不可取。
下面说的这个解决方法是我个人认为最好的方案，是通过CSS的letter-space方式实现的。
在出现问题的父级标签CSS样式上定义font-size: 0px;letter-space: -Npx;就可以达到正常的样式效果了。
代码3：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< style > .body{font-size: 0px;letter-space: -8px;} </ style > < body > < div > < span >T-L</ span >< span >T-C</ span >< span >T-R</ span > </ div > < div class = "body" > < span >M-L</ span > < span >M-C</ span > < span >M-R</ span > </ div > < div > < span >B-L</ span >< span >B-C</ span >< span >B-R</ span > </ div > </ body >

参见：
如何解决Inline-Block元素的空白间距

想做成类似京东和淘宝中商品并排的风格，却发现，Chrome和IE互不兼容。display=inline则Chrome一行显示一个商品，display=inline-block，则IE9显示一个商品。

最后搜到一个办法：

让所有标签在各个浏览器下（ff1-3,IE6-8,chrome,opera）都实现类似display:inline-block的写法：

display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
说明：让行内元素（span，a标签等实现类似inline-block的效果），display:-moz-inline-stack;display:inline-block;就足够了。
要实现块状元素的inline-block，需要用到display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
全部，其中display:-moz-inline-stack;display:inline-block;针对firefox，chrome，opera，IE8，而*display:inline;zoom:1;针对IE6和IE7。

原文在此：

http://hi.baidu.com/iamzhangxinxu/blog/item/9662e287273a343767096e86.html