各种浏览器兼容问题总结

前言

针对一些特殊行业及业务相关有兼容要求的总结方法，当然我们一把vue3梭哈的时候，兼容无关痛痒。但是正如阳光刺眼的时候，我们需要墨镜了。

1.ie和ios日期格式问题

IE低版本上Date对象传参格式，和ios环境一样，日期格式下"2020-07-06"无法处理，必须是"2020/07/06"格式

const currentDate = date.replace(/-/g, '/')

2.ie上图片样式混乱

IE10和IE9上图片样式显示怪异

// IE10上对于img标签，max-width和min-width无效，必须设置具体的width 
// IE9上默认给图片复制width和height在img标签上，设置全局img resetcss 
img{ 
width:auto; 
height:auto 
}

3.ie9下载问题

IE9上不支持Blob对象，导致下载后端返回文件流失败

  downloadExcel(res, fileName) {
    const blob = new Blob([res], {
      type: 'text/txt,charset=UTF-8',
    })
    fileName = fileName || '完美一卡通.txt'
    // ie11~ie10
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      return window.navigator.msSaveOrOpenBlob(blob, fileName)
    } else if (this.isIE()) {
      // ie9
      let winname = window.open(
        '',
        '_blank',
        'width=550,height=400,toolbar=false'
      )
      winname.document.open('text/html', 'replace')
      winname.document.writeln(res)
      winname.document.execCommand('saveas', '', fileName)
      winname.close()
      return
    }
    // other browser
    const elink = document.createElement('a')
    elink.style.display = 'none'
    elink.download = fileName
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
  }

4.ie浏览器判断

判断IE浏览器和IE9

// IE
  isIE() {
    return !!window.ActiveXObject || 'ActiveXObject' in window
  }
// IE9及以下
!window.AnimationEvent

5.样式兼容

IE样式设置，IE上识别

由于一些ie9不支持css3新特性，比如background-image:linear-gradient()等，
设置一下hack
background:#000\0 // ie
*color:#000 // ie
color:#eee\0 // ie

6.简单polyfill配置

polyfill的设置，react中可以设置babel/polyfill，还有一些兼容资源代码，比如支付宝h5开源：

<script
    src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>

7.国产浏览器极速配置

国产浏览器的meta设置，开始极速模式，浏览器基于Chromium，效果要好很多

// 该方法只能让浏览器打开网页默认使用极速模式，如果用户手动切换模式，则会失效
  <http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>

8.ios复制问题

ios复制粘贴兼容

// pc和ie，android上表现一致
element.select()
document.execCommand('Copy')

// ios下不支持select()方法，使用react-copy-to-clipboard组件
<CopyToClipboard text="复制的内容" onCopy={() => handlerCopy(text, 'no')}>
</CopyToClipboard>

9.ie兼容Blob包

ie9不支持的Blob，在npm xlsx包下有，体积巨大，可以单独拿出blob.js

/*  Blob.js
 * A Blob implementation.
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

;(function (view) {
  'use strict'

  view.URL = view.URL || view.webkitURL

  if (view.Blob && view.URL) {
    try {
      new Blob()
      return
    } catch (e) {}
  }

  // Internally we use a BlobBuilder implementation to base Blob off of
  // in order to support older browsers that only have BlobBuilder
  var BlobBuilder =
    view.BlobBuilder ||
    view.WebKitBlobBuilder ||
    view.MozBlobBuilder ||
    (function (view) {
      var get_class = function (object) {
          return Object.prototype.toString
            .call(object)
            .match(/^\[object\s(.*)\]$/)[1]
        },
        FakeBlobBuilder = function BlobBuilder() {
          this.data = []
        },
        FakeBlob = function Blob(data, type, encoding) {
          this.data = data
          this.size = data.length
          this.type = type
          this.encoding = encoding
        },
        FBB_proto = FakeBlobBuilder.prototype,
        FB_proto = FakeBlob.prototype,
        FileReaderSync = view.FileReaderSync,
        FileException = function (type) {
          this.code = this[(this.name = type)]
        },
        file_ex_codes = (
          'NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR ' +
          'NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR'
        ).split(' '),
        file_ex_code = file_ex_codes.length,
        real_URL = view.URL || view.webkitURL || view,
        real_create_object_URL = real_URL.createObjectURL,
        real_revoke_object_URL = real_URL.revokeObjectURL,
        URL = real_URL,
        btoa = view.btoa,
        atob = view.atob,
        ArrayBuffer = view.ArrayBuffer,
        Uint8Array = view.Uint8Array
      FakeBlob.fake = FB_proto.fake = true
      while (file_ex_code--) {
        FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1
      }
      if (!real_URL.createObjectURL) {
        URL = view.URL = {}
      }
      URL.createObjectURL = function (blob) {
        var type = blob.type,
          data_URI_header
        if (type === null) {
          type = 'application/octet-stream'
        }
        if (blob instanceof FakeBlob) {
          data_URI_header = 'data:' + type
          if (blob.encoding === 'base64') {
            return data_URI_header + ';base64,' + blob.data
          } else if (blob.encoding === 'URI') {
            return data_URI_header + ',' + decodeURIComponent(blob.data)
          }
          if (btoa) {
            return data_URI_header + ';base64,' + btoa(blob.data)
          } else {
            return data_URI_header + ',' + encodeURIComponent(blob.data)
          }
        } else if (real_create_object_URL) {
          return real_create_object_URL.call(real_URL, blob)
        }
      }
      URL.revokeObjectURL = function (object_URL) {
        if (object_URL.substring(0, 5) !== 'data:' && real_revoke_object_URL) {
          real_revoke_object_URL.call(real_URL, object_URL)
        }
      }
      FBB_proto.append = function (data /*, endings*/) {
        var bb = this.data
        // decode data to a binary string
        if (
          Uint8Array &&
          (data instanceof ArrayBuffer || data instanceof Uint8Array)
        ) {
          var str = '',
            buf = new Uint8Array(data),
            i = 0,
            buf_len = buf.length
          for (; i < buf_len; i++) {
            str += String.fromCharCode(buf[i])
          }
          bb.push(str)
        } else if (get_class(data) === 'Blob' || get_class(data) === 'File') {
          if (FileReaderSync) {
            var fr = new FileReaderSync()
            bb.push(fr.readAsBinaryString(data))
          } else {
            // async FileReader won't work as BlobBuilder is sync
            throw new FileException('NOT_READABLE_ERR')
          }
        } else if (data instanceof FakeBlob) {
          if (data.encoding === 'base64' && atob) {
            bb.push(atob(data.data))
          } else if (data.encoding === 'URI') {
            bb.push(decodeURIComponent(data.data))
          } else if (data.encoding === 'raw') {
            bb.push(data.data)
          }
        } else {
          if (typeof data !== 'string') {
            data += '' // convert unsupported types to strings
          }
          // decode UTF-16 to binary string
          bb.push(unescape(encodeURIComponent(data)))
        }
      }
      FBB_proto.getBlob = function (type) {
        if (!arguments.length) {
          type = null
        }
        return new FakeBlob(this.data.join(''), type, 'raw')
      }
      FBB_proto.toString = function () {
        return '[object BlobBuilder]'
      }
      FB_proto.slice = function (start, end, type) {
        var args = arguments.length
        if (args < 3) {
          type = null
        }
        return new FakeBlob(
          this.data.slice(start, args > 1 ? end : this.data.length),
          type,
          this.encoding
        )
      }
      FB_proto.toString = function () {
        return '[object Blob]'
      }
      FB_proto.close = function () {
        this.size = this.data.length = 0
      }
      return FakeBlobBuilder
    })(view)

  view.Blob = function Blob(blobParts, options) {
    var type = options ? options.type || '' : ''
    var builder = new BlobBuilder()
    if (blobParts) {
      for (var i = 0, len = blobParts.length; i < len; i++) {
        builder.append(blobParts[i])
      }
    }
    return builder.getBlob(type)
  }
})(
  (typeof self !== 'undefined' && self) ||
    (typeof window !== 'undefined' && window) ||
    this.content ||
    this
)

10.requestAnimationFrame兼容问题

requestAnimationFrame兼容ie9

 window.requestAnimationFrame =
      window.requestAnimationFrame ||
      function(fn) {
        return setTimeout(fn, 1000 / 60)
      }
    window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout

11.css3温和写法

渐变背景兼容写法，background: linear-gradient

// 适配不支持渐变的浏览器，在上面设置一个background，由于ie不识别渐变，会显示一个固定颜色背景，避免显示无背景
background:'固定颜色值，';
background: linear-gradient（）;

12.图片高亮效果兼容

图片高亮兼容写法

// 对于不支持filter滤镜的浏览器，可以采用opacity代替
filter: brightness(0.3);
opacity: 0.3\0;
// filter:drop-shadow,可以给透明png图片不透明部分添加高亮
filter：drop-shadow(5px 5px 10px black)

13.ie bug问题

ie9下 绝对定位 无背景 点击失效问题

// 添加必要的透明背景
background:rgba(0,0,0,0.01) 不能透明度为0，必须有一点的透明度