ie8+的兼容问题

1,在app.vue里面,处理样式问题

<!--[if IE]>
<style lang="less">
  // 兼容ie8+处理
  .el-dialog{
    margin: 20px!important;
  }
  .dialogFu{
    width: 1402px!important;
    background: none!important;
  }
  .footer_r, .footer_l{
    position: relative;
  }
  .nva_header_r,.nva_r_content_h,.DetailContent,.paging,.el-timeline-item__wrapper,
  .el-timeline-item
  {
    text-align: left;
  }
    .dialogResultC, .dialogResultCMZ {
    height: min-content!important;
  }
  .userIcon1{
    position:relative;
  }
  .userIcon1 .f31{
    position:absolute;
    left:-52px;
  }
  .userIcon2{
    position:relative;
  }
  .userIcon2 .f32{
    position:absolute;
    left:-52px;
    top:-4px;
  }
</style>
 <![endif]-->
<style lang="less">
  // IE10以上游览器
  @media all and (-ms-high-contrast: none),
  (-ms-high-contrast:active) {
    .el-dialog {
      margin: 20px !important;
      height: auto;
    }

    .dialogFu {
      width: 1402px !important;
      background: none !important;
    }

    .footer_r,
    .footer_l {
      position: relative;
    }

    .nva_header_r,
    .nva_r_content_h,
    .DetailContent,
    .paging,
    .el-timeline-item__wrapper,
    .el-timeline-item,
    .details_t {
      text-align: left;
    }

    .dialogResultC,
    .dialogResultCMZ {
      height: min-content !important;
    }
    .userIcon1{
    position:relative;
    }
    .userIcon1 .f31{
      position:absolute;
      left:-52px;
    }
    .userIcon2{ 
    position:relative;
    }
    .userIcon2 .f32{
      position:absolute;
      left:-52px;
      top:-4px;
    }
  }

</style>

2,main.js里面,import ‘babel-polyfill’;要放在第一行引入

import 'babel-polyfill';

3,在babel.config.js里面

const plugins = [];
module.exports = {
  presets: [
    '@vue/app',// 兼容配置
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry',
        'modules': 'commonjs'
      }
    ]
  ],
};

4,在index.html里面,head里加一行

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

5,
登录的时候判断是否是ie浏览器

console.log(399,location.href.substring(7, 12))
        // 开发环境
        if (location.href.substring(7, 12) === 'local') {
          window.open("http://localhost:8080/#/PublicityResult", '_blank')
          console.log(this.IEVersion())
          // if (this.IEVersion() === -1) {  //不是ie
          //   window.open(val.link, '_self'); 
          // } else {
          //   var a = document.createElement("a");
          //   let href1 = val.link.replace('#/', 'index.html#/PublicityResult');
          //   console.log(411,href1)
          //   a.setAttribute("href", href1);
          //   a.setAttribute("target", "_blank");
          //   a.setAttribute("id", "openwin");
          //   document.body.appendChild(a);
          //   a.click();
          // }
        }

        if (val.link && val.disabled) {
          console.log(422,this.IEVersion())
          if (this.IEVersion() === -1) { //不是ie
            window.open(val.link, '_self');
          } else {
            var a = document.createElement("a");
            let href1 = val.link.replace('#/', 'index.html#/PublicityResult');
            console.log(427,href1)
            a.setAttribute("href", href1);
            a.setAttribute("target", "_blank");
            a.setAttribute("id", "openwin");
            document.body.appendChild(a);
            a.click();
          }
        }

      },

6,

IEVersion() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -
          1; //判断是否IE<11浏览器  
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
        if (isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if (fIEVersion == 7) {
            return 7;
          } else if (fIEVersion == 8) {
            return 8;
          } else if (fIEVersion == 9) {
            return 9;
          } else if (fIEVersion == 10) {
            return 10;
          } else {
            return 6; //IE版本<=7
          }
        } else if (isEdge) {
          return 'edge'; //edge
        } else if (isIE11) {
          return 11; //IE11  
        } else {
          return -1; //不是ie浏览器
        }
      },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值