一个元素如果被设置为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>