关于ie浏览器兼容性处理

时间：2022-08-26 15:11:39

浏览器兼容所遇到的问题总结

1、CSS文件限制

Internet Explorer（简称IE）强加了一些可能直接影响页面呈现的CSS文件限制。以下是IE 9及更早版本中已知的CSS文件限制列表。
- 每页最多31个CSS文件或

2、bootstrap不支持IE兼容模式。

设置强制浏览器按照最新的标准去渲染，防止ie8下显示混乱

<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">  //ie浏览视图设为最高

3、让bootstrap支持ie8

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="<%=basePath%>static/js/ltIE9/html5shiv.min.js"></script> <script src="<%=basePath%>static/js/ltIE9/respond.min.js"></script> <![endif]-->

html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

4、jquery对ie的兼容问题

2.0以上版本的jQuery已经不再支持IE8及以下版本的IE浏览器，兼容ie8需使用低版本jquery。

5、透明度兼容（兼容ie8）

a: 透明度opacity，不兼容ie8，需使用以下方式兼容

Eg：opacity:0.5;
     filter:alpha(opacity=50); 
    -moz-opacity:0.50;

b: 颜色的rgba形式不兼容ie8，需使用以下方式兼容
eg：background: rgba(255,255,255,.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。
19–> 0.1
33–>0.2
4C–>0.3
66–>0.4
7F–>0.5
99–>0.6
B2–>0.7
C8–>0.8
E5–>0.9
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；都是白色。

6、渐变和圆角不能同时兼容（ie9）

将渐变和圆角分别设置在2个标签上，外层设置圆角，然后overflow：hidden；里面设置渐变。

7、关于css 的hack

bborder:2px solid #090\9; /* IE6/7/8的属性 */ 
border:2px solid #F90\0; /* IE8支持 */

(尽量少使用hack)

8、使用background-size: cover设置全屏背景

可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
将sizingMethod设置为scale就可以了。

9、addEventListener() 方法用于向指定元素添加事件句柄。
Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法
如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
以下实例演示了跨浏览器的解决方法：

var x = document.getElementById("myBtn");
if (x.addEventListener) {        //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

10、CSS3 线性渐变（linear-gradient） 兼容IE8,IE9

background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

可以使用工具生成渐变css代码，操作简单方便，做了各种兼容处理，网站地址：http://www.colorzilla.com/gradient-editor/

标签：

相关文章