浏览器兼容性

1 提高兼容性的设置

• 使用最新版IE渲染

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  

• 让双核浏览器默认使用webkit内核

  <meta name="renderer" content="webkit">
  

2 CSS hack

由于不同的厂商的浏览器，或者是同一个浏览器不同的版本（ie），对css的解析和认识不完全一样可能会导致不同浏览器显示的效果不相同，那么我们需要针对某个浏览器，去写不同的样式，让代码能够兼容所有的浏览器。

2.1 CSS 属性前缀法

*color： /*ie 5,6,7*/
+color： /*ie 5,6,7*/
#color： /*ie 5,6,7*/
_color： /*ie 5、6*/
color\0:  /*ie 9 10 11*/
color\9:ie  /*6 7 8 9 10*/
color\9\0:  /*ie 8 9 10*/

2.2 选择器前缀法

/* ie 5 6*/
*div{ 

} 

/*ie7*/
*+div{
}

3 IE 条件注释

IE 中的条件注释对 IE 的版本和非IE版本有优秀的区分能力。

条件注释的基本结构和HTML的注释 <!-- --> 是一样的。因此 IE 以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

IE9 以及 IE9 以下浏览器可以识别条件注释。

比较符号：

lt    表示    <
gt    表示    >
gte    表示    >=
lte    表示    <=
!      表示    !=

案例：

<!--[if IE 8]> 仅IE8可见 <![endif]--> 

<!--[if gt IE 8]>仅IE 8以上可见<![endif]—>

<!--[if lt IE 8]>仅IE 8以下可见<![endif]—>

<!--[if gte IE 8]>IE 8及以上可见<![endif]—>

<!--[if lte IE 8]>IE 8及以下可见<![endif]—>

<!--[if !IE 8]>非IE 8的IE可见<![endif]-->

<!--[if !IE]><!--> 您使用不是 Internet Explorer <!--<![endif]-->