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