“被迫”兼容IE11遇到的一些问题和解决方案

JavaScript - Array

IE全系列不兼容Array.prototype.find，部分可能的旧版本也可能确实Array下的其他方法，提供一些polyfill供参考。

// Polyfill for Array.prototype
(function () {
    if (!Array.prototype.find) {
        console.log("Polyfill 'array.find'");
        Array.prototype.find = function(callback) {
            if (this === null) {
              throw new TypeError('Array.prototype.find called on null or undefined');
            } else if (typeof callback !== 'function') {
              throw new TypeError('callback must be a function');
            }
            var list = Object(this);
            // Makes sures is always has an positive integer as length.
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            for (var i = 0; i < length; i++) {
              var element = list[i];
              if ( callback.call(thisArg, element, i, list) ) {
                return element;
              }
            }
          };
    }
    if (!Array.prototype.filter) {
        console.log("Polyfill 'array.filter'");
        Array.prototype.filter = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                if (callbackFn.call(this, this[i], i, this)) {
                    arr.push(this[i]);
                }
            }
            return arr;
        }
    }
    if (!Array.prototype.map) {
        console.log("Polyfill 'array.map'");
        Array.prototype.map = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                /* call the callback function for every value of this array and push the returned value into our resulting array */
                arr.push(callbackFn(this[i], i, this));
            }
            return arr;
        }
    }
}())

如果你的环境允许，可以使用polyfill.io 的工具来生成一个根据不同浏览器自动加载的polyfill包，但是请小心供应链攻击

CSS - Flex bug

using flex

flexbox 需要IE10+

justify-content: center;

需要在出现问题的容器上加上：

flex-direction: column;

尽管无论是哪个轴，双center原则上应该是整个容器中心，但是IE下必须声明。

background image using data uri (SVG)

部分SVG特性不支持，保险起见，用URL链接吧。

不过base64的png url还可以。