IE8兼容性问题的解决方案 - 维他奶℃

对于IE8没什么好说的，优点就是可以下载其他浏览器，自行体会吧！

1.border-radius 圆角

圆角在ie8下也是不支持的，需要下载一个文件PIE.htc，亲测有效，代码如下：

border-radius: 25px;
/*兼容圆角*/`
-ms-behavior:url(/portal/themes/boss/login/css/PIE.htc);
behavior: url(/portal/themes/boss/login/css/PIE.htc);

2.媒体查询media

一般在设计分辨率会使用媒体查询，但是，IE8不一样，无法识别媒体查询@media。还好相对的解决方案，下载一个respond.min.js就解决了。解决方案如下：

<!-- 如果不是ie，用gzpt_login.css -->
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!--[if lte IE 11]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!--[if lte IE 10]>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" />
<![endif]-->
<!-- <link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_login.css" /> -->
<!--[if lte IE 9]>  
<link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_loginie8.css" />
<script type="text/javascript" src="<%=basePath%>/portal/themes/boss/login/js/respond.min.js"></script>
<![endif]-–>

3.HTML5标签

IE8不支持HTML5的新标签，如<header>、<nav>等在IE8无法渲染，html5shiv.js 可帮助IE6-8浏览器兼容HTML5语义化标签。

解决兼容方案：在页面中引用html5shiv.js文件。必须添加在页面的<head>元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部引用。

4.CSS3字体单位“rem”

css3引入了新的字体大小单位rem，与em的“相对于其父元素来设置字体大小”的功能不同，rem是相对于根元素<html>的字体大小比率单位，成了目前的主流单位之一，IE9+开始支持，IE8就只能通过引入js库来支持了

解决兼容方案：在页面中引用rem.js文件。需要引用在页脚，也就是<body>末尾，在所有css文件引用和DOM元素之后。

5.box-shadow 盒子阴影

ie8不支持的一个css3新特性，使用pie.htc这个文件。如下：

border-radius:25px;
-ms-behavior:url(/portal/themes/boss/login/css/PIE.htc);
behavior:url(/portal/themes/boss/login/css/PIE.htc);

6.JS数组的forEach方法

IE8的数组对象没有forEach方法,所以使用原生js实现方法。如下：

if ( !Array.prototype.forEach) {
  Array.prototype.forEach = function froEach (callback, thisArg) {
      if (this == null) {
         throw new TypeError("this is null or not defined")
     }
     let o = Object(this)
     let len = o.length >>> 0 (无符号右移0位)
     if ( typeof callback !== 'function') {
       throw new TypeError( callback + " is  not a function") 
     }
     let k = 0, t;
     if ( argument.length > 1 ) {
        t = thisArg
     }
     while (k < len) {
          let kValue;
          if ( k in o) {
             kValue = o[k]
             callback.call(T, kValue, k , o)
          }
          k++;
     }
   }
}

IE8兼容问题以后会继续补充！！！

posted on 2020-09-26 15:38 维他奶℃ 阅读(348) 评论(0) 收藏举报

刷新页面返回顶部