IE低版本常见的兼容问题解决

当每次谈到解决低版本IE兼容问题时，不知道大家有没有一种头皮发麻的感觉(内心独白：谁tm发明的IE，我要s了他，开个玩笑）.

下面我们就简单谈一谈低版本IE常见的兼容问题：

在我们解决浏览器的兼容问题时，我们需要了解为什么会出现浏览器的兼容问题：

1各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦

2由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床

再了解下现在的几大主流浏览器及其内核
1、IE 内核：Trident
现在更新到最新版的IE11,之前有的版本有IE5\6\7\8\9\10,IE8及IE8之前版本不支持html5和css3，所以一般IE兼容只做到IE8以上不是有特别需求，一般不考虑低版本IE兼容。
2、Mozilla(火狐) 内核：Gecko
3、Google(谷歌) 旧版本内核WebKit，新版本内核Blink
4、Opera (欧朋) 新版本内核Blink

IE相关兼容及解决
A：图片png24格式的兼容，png24格式在IE6上不透明

hack：把png24格式换成png8或者GIF格式

B：默认高度 (如果是需要看不见一定要加height：0；如果是需要其他的数值，那么就给其他的数值)
描述：在IE7或者IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）

hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;

C、双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，
会错误地把浮向边边界（margin）加倍显示。

hack:给浮动元素添加声明：display:inline;

D、在IE6及更低版本的浏览器里，如果想去掉input的默认边框，不能设置border：none；

hack：设置input{border：0；

E、如果设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在ie6上是在顶部的

hack：给input添加一个行高等于它的高度。

F、在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）

hack：给右面的浮动元素添加声明：clear:right;

G、IE7及以下浏览器li有时候会莫名的向下撑大3-4像素。

hack:给li添加一个 +margin-top：-3px或者-4px

当我们需要对IE浏览器设置专属样式时，我们就需要用到过滤器，
下面我就举几个常见的例子

1） 下划线属性过滤器 选择符{_属性：属性值；}
由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，
但是在IE6及更低版本浏览器中会继续解析这个规则

2） !important关键字过滤器 选择符{属性：属值 !important;}
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，
我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。

3） \9 选择符{属性：属性值\9;} IE浏览器组识别

4） \0 选择符{属性：属性值\0;} 只有IE8及以上浏览器起作用

5） + 或者 * 选择符{+属性：属性值;} ie7 IE7 以下(包括IE7) 识别

6） ：root选择器 :root 选择符{属性：属性值;} 除了IE8及更早的浏览器识别