如何解决css3在老版本IE下的兼容性

html-css014

如何解决css3在老版本IE下的兼容性,第1张

无法全部完美解决,如果能完美解决就不存在兼容这个概念了。

有很多js可以让一些老版本ie支持css3特性,但只是针对性的,没有哪个js能解决所有css3兼容问题,所以想通过js来最大程度让低版本ie支持css3的多种特性的话,你得同时引用几十个js,这个是得不偿失的,并且他们之间有没冲突你也不知道。

不要试图去搞定兼容问题,应该学会适当的降级处理,当一个css3效果遇到低版本ie时,在保障内容能正确显示、阅读的情况下,让效果略为下降

html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。

respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

官方网站: http://css3pie.com/

演示地址: http://css3pie.com/demos/gradient-patterns/

1.兼容border-radius

2.阴影效果

3.部分 CSS3 的效果,如 多张背景图,border-image,背景颜色渐变效果

4.png 图片透明效果

E浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题,于是通常在HTML中添加下列代码来使 IE 使用固定的渲染模式:

代码如下:

<metahttp-equiv="X-UA-Compatible"content="IE=8"><!--以IE8模式渲染-->

<metahttp-equiv="X-UA-Compatible"content="IE=7"><!--以IE7模式渲染-->

还 有一种情况,在IE8下只有不使用兼容模式页面才能显示正常,但是如果设定为IE8的模式,在IE9中却会导致CSS3失效。看来,需要针对 IE8、IE9 分别 禁用兼容模式。怎么办呢?可以在后台判断浏览器版本,如果是IE8就输出content="IE=8",如果是IE9就输出 content="IE=9"。其实还可以单纯通过HTML来实现的,HTML代码如下:

<metahttp-equiv="X-UA-Compatible"content="IE=9IE=8IE=7IE=EDGE">