兼容问题

一、图片下方间隙

1、给图片设置：vertical-align：top/middle/bottom

2、给图片转块：display：block；

3、给图片的父元素设置：font-size：0；line-height：0；（缺点：需要给子元素单独设置字号和行高

二、小高度问题

在ie6及以下版本出现

解决方法：

font-size: 0;

line-height: 0;

overflow: hidden;

 

三、双边距问题

Ie6及以下版本，给浮动元素设置margin-left，第一个浮动元素会出现双倍的间距

解决方法：

_display:inline;

四、块转内联块不在一行显示

Ie7及以下出现

解决方法：

*display:inline;

*zoom: 1;

五、父元素的溢出隐藏失效

在ie6和ie7两个版本里，给子元素设置相对定位，给父元素设置溢出隐藏，父元素的溢出隐藏会失效

解决方法：给父元素设置相对定位。

六、li和li之间的间隙

在ie7及以下会出现，li的里边有两个及以上子元素，并且给子元素设置浮动

解决方法：

在li身上设置

vertical-align: top/middle/bottom;

七、三角形

在ie5和ie6里，里面的transparent颜色会被识别成黑色

解决方法：

给设置成transparent的颜色对应的边框设置成虚线 dashed

八、图片外边框

在ie8及以下版本，图片外包裹a标签，图片外有边框

解决方法：

给图片设置：border：none/0；

九、给input标签去掉蓝圈（不是兼容性问题）

input{

outline: none;

}