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> |
想做成类似京东和淘宝中商品并排的风格，却发现，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
