ie浏览器兼容之CSS3高级选择器和大部分属性的兼容

嘛~作为小白的我，最近开始研究浏览器兼容性问题，过程遇到很多问题，虽然阅读了很多文章，在此把问题以及解决方法分享给大家！

首先在使用CSS3高级选择器的时候，发现在ie9 以上 可以使用，ie8之下都没有反应。这是为什么呢？

因为ie9以下并不支持CSS3（选择器以及各种圆角等），也不支持html5 的语义化新标签，那么这三个问题我们怎么解决呢？

1.语义化标签的问题（对于ie低版本浏览器来言，html5新标签是它不可识别标签，这些标签在这些浏览器下是没有效果的。那么如何让这些标签能正常的展示自己以及附加的css样式呢。）

（首先如果不解决会怎么样呢？如下：header是 html5新标签）

<header></header>

然后css 中给他一个样式

header{

width: 50px;

height: 50px;

background-color: red;

}

在ie  9之下 结果如下：

当我们加入如下代码的时候

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<![endif]-->

2.第二的问题就是 我在使用css3高级选择器的时候，（比如

li:nth-child(2){

background-color: red;

}

在 ie9以下并没有效果，那么怎么解决呢？）

当然是使用selectivizr.js 啦！

http://selectivizr.com/   ←在这个网页下载下来 ，然后引入到你的页面中去。（可以用bootcdn里的cdn加速）

①由于安全原因，样式文件需以域的形式调用，像是file:是不起作用的。（也就是需要搭建服务器使用）

如果不搭建服务器使用就会

，但是当我使用了node.js搭建服务器的时候，仍然出现了问题比如：IE浏览器“SEC7113: CSS 因 Mime 类型不匹配而被忽略”，  也就是 css在ie9 以上 不能被加载，这个问题的解决分为很多中情况你们可以参考https://www.cnblogs.com/likaopu/p/5256820.html   ←这位大神的。

我在这里讲一下 我的，（我注册表并没有问题）因为我用的是node.js 搭建的服务器，跟这些不一样，所以我是通过express.然后放在public中使用解决的。

②除了刚刚提到的需要搭建服务器使用之外，还需要注意在使用它之前一定要先引用一个js库，它才能生效

这里要注意下，

它对jquery支持不太好，所以 最好使用比如mootools 这种库，如果你要使用jquery 你可以再引入一次嘛。

(注意引入库的版本 （之前我引入高版本jquery然后造成 ie6 7 8 不识别jquery 的json格式，然后 you导入了json.js解决，但是 又出现某些方法的缺少，所以一定要确定好版本号！）)

③样式属性必须使用<link>标签，但是你可以使用@import在你的样式表里面，以<style>标签定义的CSS样式是不会被解析的。

④此效果非动态的。一旦样式被应用就被固定了，DOM改变时不会映射过去的。

⑤Selectivizr要想在IE下起作用，需要时标准模式，请检查您的页面头部是否有DTD 。

3.第三个问题就是 我们要是需要使用Css3中的圆角，盒阴影之类的渲染怎么办，这就要使用PIE.htc了

只要把下面这行代码 加载到 body 下面

首先下载好PIE.htc 

那么我们来试一试，首先创建个div 给一个id为test

< div id= "test" ></ div >

然后给他css样式

#test{

width: 50px;

height: 50px;

border: 1px solid #999;

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

border-radius: 50px;

behavior: url( 'PIE/PIE.htc');

}

那么我们在ie 6 7 8 都可以使用圆角啦！

OVER!