IE7下各类常见css兼容问题

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