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;
}

  

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