清除inline-block元素之间的空白

一个元素如果被设置为display：inline-block，那么这个元素将表现为行内块的性质。被设为行内块的元素

对内（子元素）表现为块级框，具体为可以设置高度宽度，可以设置垂直margin和padding等；对兄弟元素

则表现为行内框，具体表现为相邻行内块可在同一行显示，而且有着行内元素的特点，就是框与框之间可以出现

空白，造成空白的方式可以使“空白符，制表符，换行符”。

 

可以通过简单的方式消除行内块之间的空白，就是在行内块的包含块上设置属性：

　　

.wrapper{font-size: 0;*word-spacing: -1px;}

font-size设为0，可以让这些空白符的大小为0，从而不显示。但是在IE6,7下存在1px间隔现象，这样可以通过

设置word-spacing来修正。

但是对于Safari来说，不支持字体大小为0，所以需要额外的修正：

@media screen and (-webkit-min-device-pixel-ratio:0) {
            .wrapper {
                letter-spacing: -4px; /* 修正Safari */
            }
        }

另外，IE6,7并没有inline-block属性，但是可以通过对行内元素触发hasLayout来模拟。

综上，修正行内块元素之间空白的方式的实现：

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            .wrapper {
                letter-spacing: -4px; /* Safari 等不支持字体大小为 0 的浏览器,根据父级字体调节*/
            }
        }
        .wrapper{font-size: 0;*word-spacing: -1px;}
        .il{border:1px solid #000000;display:inline-block;
word-spacing: normal;letter-spacing:normal;*display:inline;*zoom:1;width:80px;height:100px;background: #cecece;font-size: 14px;vertical-align: top;}
        .bl{border:1px solid #000000;width:80px;height:100px;word-spacing: normal;letter-spacing:normal;background:#d0e9c6;display: inline-block;*display:inline;*zoom:1;font-size: 14px;vertical-align: top;}
        img{border:1px solid #000000;}            

<div class="wrapper">
　　<span class="il">inline-block 1</span>
　　<span class="il">inline-block 2</span>
　　<span class="il">inline-block 3</span>
　　<div class="bl">block 1</div>
　　<div class="bl">block 2</div>
　　<div class="bl">block 3</div>
　　<img src="../../img/1.jpg" width="80" height="100">
　　<img src="../../img/2.jpg" width="80" height="100">
</div>