inline-block空白间隙

标签：

很多时候display:inline-block比float:left;好用。也因为IE6 7不支持inline-block，所有一般都这样写：{display:inline-block; *display:inline; *zoom:1}，但是用了inline-block之后一些较高级的浏览器会出现空白间隙，而在IE6 7下是没有的。如图：

其实这个问题是我们自己造成的，为了代码的可读性，在一行结束打个回车换行，回车产生回车符，回车符相当于空白符，真正原因就是这个回车符。

解决方法：竟然是字符，那么只需要把字体大小设置成0就好了。font-size：0；这个方法在safari浏览器下还是有问题的，完整的解决方法是：

ul{
    font-size:0;
    letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整*/
    word-spacing: -8px;
}
li{
    display:inline-block;
    *display:inline;
    *zoom:1;
    letter-spacing:normal;
    word-spacing:normal;
}

inline-block空白间隙

标签：

原文地址：http://www.cnblogs.com/xiaojiu9/p/4597390.html