原文：http://www.cnblogs.com/2050/archive/2012/05/16/2504081.html
inline-block元素在布局时有一个明显的bug，inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。
解决方法分两种，一种是改变html结构法，另一种是css法
先说第一种，比如下面这段代码:
|
1
2
3
4
5
6
|
<ol> <li>首页</li> <li>关于我们</li> <li>联系我们</li> <li>加入我们</li></ol> |
假设 li 是 inline-block元素，则 li 间会出现讨厌的空隙，这时我们可以换个写法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<ol> <li>首页</li ><li>关于我们</li ><li>联系我们</li ><li>加入我们</li></ol>或<ol> <li> 首页</li><li> 关于我们</li><li> 联系我们</li><li> 加入我们</li></ol>或<ol> <li>首页</li><!-- --><li>关于我们</li><!-- --><li>联系我们</li><!-- --><li>加入我们</li></ol> |
以上三种写法都是可以的，总之就是避免让 </li>与<li>之间出现书面上的空格。
还有一种写法是去除闭合标签，如：
|
1
2
3
4
5
6
|
<ol> <li>首页 <li>关于我们 <li>联系我们 <li>加入我们</ol> |
这种写法因为不符合html规范，所以还是避免使用为好
第二种是css解决方法。思路是把inline-block元素的父元素的font-size设为0，letter-spacing和word-spacing设为负数，然后再在inline-block元素中把这几个值恢复正常即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
ul{ font-size:0; letter-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/ word-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/ }ul li{ display:inline-bolck; zoom:1; font-size:12px; letter-spacing:normal; word-spacing:normal;} |
去除inline-block元素间的空隙
inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。废话不多说了，直接讲解决方法吧。
总体来时可分为两种方法，一种是改变html结构法,另一种是css法。
先说第一种，比如下面这段代码:
|
1
2
3
4
5
6
|
<ol> <li>首页</li> <li>关于我们</li> <li>联系我们</li> <li>加入我们</li></ol> |
假设 li 是 inline-block元素，则 li 间会出现讨厌的空隙，这时我们可以换个写法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<ol> <li>首页</li ><li>关于我们</li ><li>联系我们</li ><li>加入我们</li></ol>或<ol> <li> 首页</li><li> 关于我们</li><li> 联系我们</li><li> 加入我们</li></ol>或<ol> <li>首页</li><!-- --><li>关于我们</li><!-- --><li>联系我们</li><!-- --><li>加入我们</li></ol> |
以上三种写法都是可以的，总之就是避免让 </li>与<li>之间出现书面上的空格。
还有一种写法是去除闭合标签，如：
|
1
2
3
4
5
6
|
<ol> <li>首页 <li>关于我们 <li>联系我们 <li>加入我们</ol> |
这种写法因为不符合html规范，所以还是避免使用为好
第二种是css解决方法。思路是把inline-block元素的父元素的font-size设为0，letter-spacing和word-spacing设为负数，然后再在inline-block元素中把这几个值恢复正常即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
ul{ font-size:0; letter-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/ word-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/ }ul li{ display:inline-bolck; zoom:1; font-size:12px; letter-spacing:normal; word-spacing:normal;} |