IE8兼容那些事（包括react）

最新推荐文章于 2018-10-09 10:55:39 发布

冲向超级个体

最新推荐文章于 2018-10-09 10:55:39 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： react相关文章标签： ie 8 react

本文链接：https://blog.youkuaiyun.com/zhaolandelong/article/details/78470671

react相关专栏收录该内容

8 篇文章

订阅专栏

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可按如下方式引用

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为基础，其他版本请自行调整。

html要做好es5的兼容准备，引入各种shim，做好内核切换等，参考
项目初始化——HTML模板

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"]
        })
    }]
}