使用JS 根据浏览器版本对CSS做相应的兼容处理

用于处理部分浏览器CSS兼容的问题

应该会有更好的办法  这里仅供参考

 

• 在 util.js 创建一个公用的方法

/**
 * 获得当前浏览器版本
 * @return String
 */
export function getExplorer() {

  let explorer = window.navigator.userAgent

  if (explorer.indexOf('MSIE') >= 0) {
    let browser = navigator.appName
    let b_version = navigator.appVersion
    let version = b_version.split(';')
    let trim_Version = version[1].replace(/[ ]/g, '')
    let number = ''
    for (let i = 0; i < trim_Version.length; i++) {
      if ('0123456789'.indexOf(trim_Version.substr(i, 1)) > -1) {
        number += trim_Version.substr(i, 1)
      }
    }
    if (number < '8.0') {
      if (trim_Version === 'MSIE6.0') {
        return 'IE6'
      } else if (trim_Version === 'MSIE7.0') {
        return 'IE7'
      } else if (trim_Version === 'MSIE5.5') {
        return 'IE5'
      } else {
        return 'IE'
      }
    } else {
      return 'IE8+'
    }
  } else if (explorer.indexOf('Firefox') >= 0) {
    return 'Firefox'
  } else if (explorer.indexOf('Chrome') >= 0) {
    return 'Chrome'
  } else if (explorer.indexOf('Opera') >= 0) {
    return 'Opera'
  } else if (explorer.indexOf('Safari') >= 0) {
    return 'Safari'
  } else if(explorer.indexOf('Windows NT') >= 0){  
    //这里是 IE 11 和 win10 Egde 统一返回IE8+ 可以根据实际需求调整
    return 'IE8+'
  }
}

• 在相应组件中使用，并处理

//导入
import {getExplorer} from "../util/BaseUtil";


//在mounted中引用处理
mounted() {
      //Safari 和 IE 浏览器下的兼容处理
      let browser = getExplorer()
      console.log(browser)
      if (browser === 'Safari' || browser === 'IE8+' || browser === 'IE5' || browser === 'IE6'|| browser === 'IE7'|| browser === 'IE'){
        let numberItemBox = document.getElementsByClassName("numberItemBox");

        //这里使用getElementsByClassName获取元素，返回的是一个数组，记得做一个遍历处理
        let i;
        for (i = 0; i < numberItemBox.length; i++) {
          numberItemBox[i].style.right = "13px";
        }

        let markItemBox = document.getElementsByClassName("mark-item");
        let j;
        for (j = 0; j < markItemBox.length; j++) {
          markItemBox[j].style.right = "10px";
        }
      }
    },