清除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;} 本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读