嘛~作为小白的我,最近开始研究浏览器兼容性问题,过程遇到很多问题,虽然阅读了很多文章,在此把问题以及解决方法分享给大家!
首先在使用CSS3高级选择器的时候,发现在ie9 以上 可以使用,ie8之下都没有反应。这是为什么呢?
因为ie9以下并不支持CSS3(选择器以及各种圆角等),也不支持html5 的语义化新标签,那么这三个问题我们怎么解决呢?
1.语义化标签的问题(对于ie低版本浏览器来言,html5新标签是它不可识别标签,这些标签在这些浏览器下是没有效果的。那么如何让这些标签能正常的展示自己以及附加的css样式呢。)
(首先如果不解决会怎么样呢?如下:header是 html5新标签)
然后css 中给他一个样式
在ie 9之下 结果如下:
当我们加入如下代码的时候
2.第二的问题就是 我在使用css3高级选择器的时候,(比如
在 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 下面
那么我们来试一试,首先创建个div 给一个id为test
然后给他css样式
那么我们在ie 6 7 8 都可以使用圆角啦!
OVER!