IE8兼容那些事（包括react）

CSS

• IE浏览器hack

@media \0screen {} //IE8的hack

其他hack：http://www.cnblogs.com/PeunZhang/archive/2012/04/09/2437563.html

• IE8实现背景半透明，内容不透明

高版本浏览器用rgba可完美解决，但IE8不支持rgba，需要利用滤镜解决。另外IE9下rgba和filter都生效，会造成双倍透明效果，也需要注意。提供两个解决方案：

//现代浏览器    background: rgba(0, 0, 0, .7);  //第一种 利用滤镜的渐变，但对于白色背景无效，不需要加IE8 hack；    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000, endcolorstr=#7F000000);//第二种 position必须为static子元素为relative，子元素才不会透明；且父元素不能用z-index，要用的话再套一层“爷爷”元素，给爷爷设置z-index；需要加IE8 hack；    @media \0screen {        background: #000;        filter: Alpha(opacity=70);    }

JS

• IE8下event对象

IE8的event对象是挂载在window对象下的，阻止冒泡等，也有不同的实现。以阻止冒泡为例：

function stopPropagation(e){

    var e = e || window.event; //IE8的event对象挂载在window下，函数参数未自带

    (e.stopPropagation) ? e.stopPropagation(): e.cancelBubble = true; //阻止冒泡

}

其他类似

阻止冒泡：(e.stopPropagation) ? e.stopPropagation(): e.cancelBubble = true;

阻止默认事件：(e.preventDefault) ? e.preventDefault(): e.returnValue = false;

获取点击元素：var target = e.target || e.srcElement;

• IE 8下小心使用console.log

在IE8中要想使用它调试代码必须要先开启F12，如果不开启F12，在浏览器的下方就会显示报错。那是因为IE8会将console.log()默认处理为错误逻辑，但是在F12下处理为控制台输出。比较有意思的是，但我们将F12关闭，刷新页面，IE8 仍然将console.log()处理为控制台输出，即打开过一次F12，就会一直识别console.log()。因此我们常常会在调试后忘记删除console.log()语句。

怎样让报错重现：开启一次F12后，会识别console.log()。我们需要清空浏览器缓存，再重启浏览器，不打开F12，就会重现了。我们应该做的是养成好的编程习惯，不要滥用console.log()，调试后记得注释掉或删掉调试代码。如有必要，可引入相应shim。

• IE8变量类型判断

Object.prototype.toString.call(null | undefined) === '[object Object]'，而chrome为[object Null]、[object Undefined]

• IE8的application/json兼容问题

IE8用iframe处理上传文件时（如ant design），如果返回的content-type:application/json，会被当成文件，触发下载；另外不用iframe时，虽然不会触发下载，但是也会被当成文件走缓存策略（如304），使得接口数据不变。

1、触发下载的问题，需要后端对返回的content-type修改成 text/plain或 text/html。但也要注意副作用，较稳妥的做法是后端判断agent是否为IE8 IE9，单独设置content-type。

2、接口数据被缓存的问题，如果按1的方式修改了content-type应该就不会出问题了（没亲自试过）。另一种思路是每个请求都加个时间戳参数。

https://github.com/react-component/upload#ie89-note

SHIM

注意：所有shim已加入公用cdn，具体请访问前端静态资源CDN列表，有较详细备注。所有shim可按如下方式引用

<!--[if lt IE 9]>
<script src="//st01.chrstatic.com/themes/chr-cdn/html5shiv/v3.7.3/html5shiv.min.js"></script>
<![endif]-->

• html5shiv

让低版本浏览器支持html5标签，详见：https://github.com/aFarkas/html5shiv

• Respond

让低版本浏览器支持@media响应式，详见：https://github.com/scottjehl/Respond

• es5-shim

让低版本浏览器支持ES5方法，详见：https://github.com/es-shims/es5-shim

待补充：fetch、json、console等

LIBS

• jquery

v1.12.x支持IE6/7，v1.13.x支持IE8

• react

v0.14.x支持IE8

https://github.com/xcatliu/react-ie8

• react-router

v2.x支持IE8

• ant design

v1.x 支持IE8

• swiper

v2.x支持IE8

react+webpack兼容IE8的配置

首先react要v0.14.x以下，以下代码均以react v0.14.8+webpack2为基础，其他版本请自行调整。

1. html要做好es5的兼容准备，引入各种shim，做好内核切换等，参考HTML初始化模板——赵兰得隆
2. webpack配置react、ES5转译，以及postcss等loader（最关键也是最麻烦的）

 

//开发环境配置，不压缩，需要es3ify-loader处理IE8保留字module: {    rules: [{        test: /\.(js|jsx)$/,        include: /src/,        use: [            //es3ify-loader必须            "es3ify-loader", {                loader: 'babel-loader',                options: {                    presets: ['es2015', 'react']                }            }        ]    }, {        test: /\.(css|scss)$/,        include: /src/,        use: ExtractTextPlugin.extract({            fallback: "style-loader",            use: ["css-loader", {                loader: "postcss-loader",                options: {                    plugins: function() {                        return [                            require('autoprefixer')({ browers: ['ie >=8', 'last 5 versions'] }) //自动加低版本前缀                        ];                    }                }            }, "sass-loader"]        })    }]}//生产环境，需要压缩，不需要es3ify-loader，但需要配置UglifyJsPlugin插件plugins: [    new webpack.optimize.UglifyJsPlugin({        mangle: {            screw_ie8: false,            //mangle 通过设置except数组来防止指定变量被改变 (防止指定变量被混淆)             except: ['$super', '$', 'exports', 'require']        },        output: {            screw_ie8: false, //必须            comments: false //是否有注释        },        compress: {            screw_ie8: false, //必须            warnings: false //是否显示警告        }    })],module: {    rules: [{        test: /\.(js|jsx)$/,        include: /src/,        use: [{            loader: 'babel-loader',            options: {                presets: ['es2015', 'react']            }        }]    }, {        test: /\.(css|scss)$/,        include: /src/,        use: ExtractTextPlugin.extract({            fallback: "style-loader",            use: [{                loader: "css-loader",                options: {                    minimize: true //压缩css                }            }, {                loader: "postcss-loader",                options: {                    plugins: function() {                        return [                            require('autoprefixer')({ browers: ['ie >=8', 'last 5 versions'] })                        ];                    }                }            }, "sass-loader"]        })    }]}