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