IE兼容、cssHack 、iconfont字体图标

一、IE兼容

IE的主要兼容问题是IE8及以下

安装软件 ietester 测试低版本ie的兼容问题，这个软件里集成好多版本的ie （IE5.5 IE6 IE7 IE8 IE9）

1、问题一：小高度问题

出现场景：

在IE6及以下版本，会有小高度问题

解决方案：

   font-size: 0;
   line-height: 0;
   overflow: hidden;

2、问题二：双边距问题

出现场景：

在IE6及以下版本，浮动元素 设置 margin-left，最左侧的盒子会出现双倍边距

解决方案：

_display:inline

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

出现场景：

在IE7 及以下版本出现，块元素转内联块元素不在一行显示

解决方案：

 *display:inline;
 *zoom:1;

4、溢出隐藏失效

出现场景：

在IE6  和  IE7里，给子元素设置相对定位，给父元素设置溢出隐藏，溢出隐藏会失效

解决方案：

给父元素也设置 position：relative；

5、li和li之间的间隙

出现场景：

在IE7及以下版本，li的子元素有浮动（浮动的元素的个数至少2个），li和li之间会有间隙

解决方案：

给li 设置
vertical-align:top/middle/bottom;

6、三角形

出现场景：

在IE5和IE6里， 透明的颜色会变成黑色

解决方案：

 border-style:dashed solid dashed dashed;
 border-color: transparent red transparent transparent;
 
 给透明边的对应的边框样式   设置为虚线（dashed）或点线（dotted）

7、图片外有边框

在IE8及以下，a标签里 包img img就会有边框

给图片设置 border：none

二、iconfont 字体图标

看起来是图片，其实是字

文字的加载速度 要快于 图片

官网地址：iconfont-阿里巴巴矢量图标库

使用步骤

1、先下载至本地

2、复制fontXXXX文件夹到项目里

3、使用：

用法有三种

用法一：字符编码使用

看 下载的字体包里的  demo_index.html  里边有步骤
​
​
支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

用法二：类名形式使用

看 下载的字体包里的  demo_index.html  里边有步骤

用法三：svg形式使用

看 下载的字体包里的  demo_index.html  里边有步骤