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