3像素bug
div容器里有图片时,图片底部和div底部会有空隙
/* 方法一 */
img{ display: block; }
/* 方法二 */
img{ vertical-align: top; }
inline-block在IE7及以下版本兼容
/* 以下两句必须分两行写才能生效 */
span{display:inline-block;}
span{*display:inline;}
inline-block元素之间有间隙
<div>
<span></span>
<span></span>
<span></span>
</div>
div{ font-size: 0; }
div > span{ font-size: 12px; }
其它方法
1.设置父容器letter-spacing: -3px
,span的letter-spacing: 0
。
2.设置div margin-left: 3px
,设置spanmargin-left: -3px;
其他兼容问题
- 右浮动元素需要写在最左边,不然右浮动元素会另起一行
- 列表的行与行之间有间隙,需设置单个元素
li{verlical-align: top;}