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;}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章