IE8浏览器兼容问题网上有很多browser.js的方案，我在IE8上试了都有各种问题。找了n个版本也没有解决。 IE9

IE8下需要兼容的问题

不支持react0.14以上版本
webpack打包配置
不支持es6语法
不支持getElementsByClassName
不支持css3，常见的border-radius，flex，color:rgba(255,81,33,1)

如何支持es6语法

网上有很多browser.js的方案，我在IE8上试了都有各种问题。找了n个版本也没有解决。实现和babel官网上的一个方案类似：（在IE11上可行，IE8上会报错）

使用 babel-standalone
script标签的type为"text/babel"

<div id="output"></div>
<!-- Load Babel -->
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
    const getMessage = () => "Hello World";
    document.getElementById('output').innerHTML = getMessage();
</script>

getElementsByClassName

IE8上不支持getElementsByClassName方法，getElementsByName也只能在form中使用，可以自己添加方法兼容；

function compatibleIE(){
   if (!document.getElementsByClassName) {
        document.getElementsByClassName = function (className,element) {
            var children = (element || document).getElementsByTagName('*');
            var elements = new Array();
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var classNames = child.className.split(' ');
                for (var j = 0; j < classNames.length; j++) {
                    if (classNames[j] == className) {
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        };
    } 
}
compatibleIE();
作者：囡柠
链接：https://www.imooc.com/article/16287?block_id=tuijian_wz
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

border-radius的替代方案

IE9+使用border-radius:50%。 IE7,IE8使用border-style: dotted;父级加上父级的overflow: hidden;来模拟。参见：小tips: IE7,IE8浏览器纯CSS实现正圆角效果

CSS代码：
.box {
    width: 150px; height: 150px;
    line-height: 150px;
    position: relative;
    overflow: hidden;
}
.radius {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 149px dotted;
    /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */
    margin: 0 0 1px 1px;
    border-width: 0vw;
    margin: 0vw;
    color: #cd0000;
    background-color: currentColor;
}
.text {
    position: relative;
    color: #fff;
    text-align: center;
    font-size: 24px;
}
HTML代码：
<div class="box">
    <i class="radius"></i>
    <p class="text">美女</p>
</div>

网上还有一种兼容方案: css3.htc，但是我试了后没有什么效果，拿border-radius来说，有圆形边框，但是还有方形边框。如果有很多时间可以研究下怎么调说不定可以达到圆形边框的效果。参见：让IE6/IE7/IE8浏览器支持CSS3属性

webpack打包配置

这个是一个可以跑通的webpack4的配置方案：原文参见：Webpack4+Babel7+ES6兼容IE8

{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ],
            plugins: [
              [
                '@babel/plugin-transform-runtime'
              ],
              [
                // 笔者为了兼容IE8才用了这个插件，代价是不能tree shaking
                // 没有IE8兼容需求的同学可以把这个插件去掉
                '@babel/plugin-transform-modules-commonjs'
              ]
            ]
          }
        }
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          ie8: true,
        }
      })
    ]
  }
}

react 兼容

这篇文章react如何兼容IE8里面的错误问题基本上都遇到了。兼容的过程中遇到的报错越多越坦然。

后记

好了，基本上遇到的问题都讲完了，最后我没有使用webpack打包、没有使用ES6语法。完全使用ES3语法完成了一个需求页面的开发😂😂。