很多时候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; }
时间: 2024-10-13 15:30:04