vue IE11兼容 var(--xxx)

前端网页有切换皮肤的功能，偶然发现IE11的情况下，颜色显示混乱

换肤使用的是 var(--变量名)的方式更改颜色，ie11 f12查看是因为var失效，无法识别

调整：

　　添加一个默认的css，

　　判断是否是ie( ie11) ，如果是，则加载ie11默认皮肤，隐藏切换皮肤的功能，不为Ie则不做处理

 

首先，head中添加css引入link：根据id可修改其href

<link id="ieCompatible" href="./style/xxx.css" rel="stylesheet" type="text/css"/>

body中添加script引入

<script type="text/javascript" src="./js/xxx.js"></script>

在body中添加函数调用

<body onload="ieDefault()" >

script内容：

function ieDefault() {
    // 判断是否是IE11
    var userAgent = navigator.userAgent,
              rMsie = /(msie\s|trident.*rv:)([\w.]+)/;
          var browser;
          var version;
          var ua = userAgent.toLowerCase();
          var match = rMsie.exec(ua);
          if (match != null) {
            var browserMatch =  { browser: "IE", version: match[2] || "0" };
            if (browserMatch.browser) {
              browser = browserMatch.browser;
              version = browserMatch.version;
            }
            var BVSN = (browser + version);
            if (BVSN == "IE11") {
              document.head
                .querySelector('#ieCompatible')
                .setAttribute('href', './style/ie.css');
            }
          }
  }

 

判断是否是IE浏览器的参考来源博文：https://blog.csdn.net/weixin_34235105/article/details/94148540

 

posted @ 2022-03-30 18:46  人间春风意  阅读(635)  评论(0)    收藏  举报