登录站点

用户名

密码

关于ie浏览器兼容性处理

已有 281 次阅读  2018-09-03 16:37   标签浏览器  兼容性 
浏览器兼容所遇到的问题总结 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浏览视图设为最高
  • 1
  • 2
  • 3
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]-->
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

4、jquery对ie的兼容问题2.0以上版本的jQuery已经不再支持IE8及以下版本的IE浏览器,兼容ie8需使用低版本jquery。
  • 1
  • 2
5、透明度兼容(兼容ie8)

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

Eg:opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.50;
  • 1
  • 2
  • 3

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 的hackbborder:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */
  • 1
  • 2

(尽量少使用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); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
10、CSS3 线性渐变(linear-gradient) 兼容IE8,IE9background: -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', endColor
分享 举报