Horizontal Timeline在Internet Explorer浏览器中无法运行如何解决？

1. 核查polyfill的特性覆盖范围 #

• 你当前引入的polyfill默认配置可能未覆盖Horizontal Timeline JS依赖的所有ES6+特性，需要手动指定特性列表，比如补充es6.array.iterator、es6.object.assign、dom.element.classlist、es6.promise这类低版本IE缺失的常用API，确保所有用到的语法都被垫片覆盖。
• 注意IE 11及以下不支持箭头函数、模板字符串等原生语法，这类语法无法通过polyfill兼容，必须通过babel转译打包后再引入到页面中。

2. 核查Bootstrap 5的兼容性 #

• Bootstrap 5官方已明确不再支持IE 11及更低版本的IE浏览器，其内部使用的大量CSS变量、现代JS API即使加了polyfill也可能存在布局、交互冲突，你可以先注释掉Bootstrap 5的引入，单独测试Horizontal Timeline的基础功能是否能正常运行，排查是否是框架兼容冲突导致的问题。
• 如果必须同时使用Bootstrap 5和IE兼容，需要额外引入对应的Bootstrap 5 IE兼容垫片，再重新测试效果。

3. 核查Horizontal Timeline的代码版本 #

• 你使用的2.0版本的Horizontal Timeline源码中可能存在未做IE兼容的写法，比如直接使用了closest()、forEach遍历DOM集合等IE11不支持的方法，你可以手动对这些方法做兼容处理，示例兼容代码如下：

  // 兼容IE11的NodeList.forEach方法
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
      thisArg = thisArg || window;
      for (var i = 0; i < this.length; i++) {
        callback.call(thisArg, this[i], i, this);
      }
    };
  }
  

• 也可以降级使用支持IE的更早版本Horizontal Timeline，降低适配成本。

4. 核查IE控制台报错信息 #

• 打开IE的开发者工具（按F12唤起），切换到控制台标签，查看具体的JS报错信息，根据报错定位到具体不兼容的代码位置，针对性做兼容处理，是最高效的排查方式。

内容的提问来源于stack exchange，提问作者Pranali Hadke