在一些可視化項目需求中，常常要求我們兼容到ie8，這里就簡單介紹一下怎么在可視化項目里處理ie8的兼容問題。

項目使用的技術(shù)

• react
• echart
• zrender

ie8有哪些不兼容

• 不支持高版本react
• 不支持svg canvas
• 不支持box-shadow
• 不支持base64
• 不支持rgba()
• 支持first-child, 不支持last-child
• 不支持nth-child
• 不支持 :not
• 不支持 ：checked
• 不支持 :disabled
• 不支持border-radius
• 不支持 placeholder
• 不支持opacity
• 不支持漸變
• 不支持中文命名文件
• 不支持 indexOf trim

解決方案

在ie8下使用 react

• react@0.14.9 react-dom@0.14.9
  不使用 React v15 或更高版本。使用仍然支持 IE8 的 React v0.14 即可

• console.polyfill@^0.2.2

• es5-shim@^4.4.1
  Es5-shim是一個簡單庫，它是在ECMAScript 3的引擎上實現(xiàn)了ECMAScript 5的新特性,，而且在Node.js上和在瀏覽器上有完全相同的表現(xiàn)，引入該文件后，我們就可以隨心所欲使用ECMAScript新增的新方法了。

• es3ify-webpack-plugin@0.0.1
  把引入的node_modules 和 src下的 js || jsx 文件，轉(zhuǎn)化為es3的語法

配置項如下

(進行代碼拆分)

var es3ifyPlugin = require('es3ify-webpack-plugin');
module.exports = {
 ...
 entry: {
        main: ['babel-polyfill', './src/index.jsx'],
        vendor: ['es5-shim', 'es5-shim/es5-sham', 'console-polyfill']
 }，
 plugins: [
       new es3ifyPlugin(),
       ...
 ],
 ...
}

或（不進行拆分）

var es3ifyPlugin = require('es3ify-webpack-plugin');
module.exports = {
 ...
 entry: [
    'es5-shim',
    'es5-shim/es5-sham',
    'console-polyfill',  
    'babel-polyfill', 
    './src/index'
 ],
 plugins: [
       new es3ifyPlugin(),
       ...
 ],
 ...
}

不支持indexOf trim

手動加入一下代碼，添加在模板index.html中

if (!Array.prototype.indexOf){
        Array.prototype.indexOf = function(elt /*, from*/)
        {
            var len = this.length >>> 0;
            var from = Number(arguments[1]) || 0;
            from = (from < 0)
                ? Math.ceil(from)
                : Math.floor(from);
            if (from < 0)
            from += len;
            for (; from < len; from++)
            {
            if (from in this &&
                this[from] === elt)
                return from;
            }
            return -1;
        };
        if (!String.prototype.trim) {
            String.prototype.trim = function () {
                return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
            };
        }
}

不支持中文命名文件路徑

解決方法： 使用encodeURL

mapUrl = `/static/data/map/${encodeURI(province)}.json`;

不支持漸變

progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2FFFFFF', endColorstr='#00FFFFFF',GradientType=0 );

• startColorStr:可選項。字符串(String)。設(shè)置或檢索色彩漸變的開始顏色和透明度
• EndColorStr:可選項。字符串(String)。設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。

其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進制正整數(shù)。取值范圍為 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復(fù)為默認值。

• GradientType:可讀寫。整數(shù)值(Integer)。設(shè)置或檢索色彩漸變的方向。
  　1:默認值。水平漸變。
  　0:垂直漸變。

不支持透明度

filter: alpha(opacity=40);

不支持border-radius

解決方法： 使用pie.js

下載并引入pie.js, pie.js的內(nèi)容如下。

image.png

在樣式中， 引入pie.htc即可

{
  border-radius: 10px;
   behavior: url(/static/plugins/pie/PIE.htc);  /** 引入pie.htc
}

不支持 input placeholder屬性

解決方案： js模擬 placeholder

react Input組件代碼示例

import styles from './index.scss';
import React, { Component } from 'react';
import classNames from 'classnames';

class Input extends Component {
    constructor(props) {
        super(props);
        this.supportPlaceholder = '';
    }

    componentDidMount() {
        this.props.callback && this.props.callback();
        var supportPlaceholder = 'placeholder' in document.createElement('input');
        this.supportPlaceholder = supportPlaceholder;
        this.placeholder();
    }

    componentDidUpdate(){

        if($(this.textInput).val() || document.activeElement === this.textInput){
            return false;
        }
        this.placeholder();
        

    placeholder = () => {
        let $self = $(this.textInput);
        if(!this.supportPlaceholder && $self.attr('type') === 'text'){        
            
            let defaultValue = this.props.defaultValue;
            const value = this.props.value;
            const inputText = value ? value : defaultValue ? defaultValue : this.props.placeholder;
            if(!defaultValue){
                $self.val(inputText);
            }           
        }
    }

    focus = () =>{
        if($(this.textInput).val() === this.props.placeholder){
            $(this.textInput).val('');
        }
    }

    blur = () => {
        if($(this.textInput).val() === ''){
            $(this.textInput).val(this.props.placeholder).addClass('phcolor');
        }
    }

    keyDown = () => {
        $(this.textInput).removeClass('phcolor');
    }

    render() {
        const { supportPlaceholder } = this;
        let {className, style, ...other} = this.props;
        return (
            <input 
                type="text"
                className={classNames('input', 'border_color_gray', 'synBlockBg', className)}
                {...other}
                style={style}
                onFocus={() => !supportPlaceholder && this.focus()}
                onBlur={() => !supportPlaceholder && this.blur()}
                // onKeyDown={() => !supportPlaceholder && this.keyDown()}
                ref={(input) => { this.textInput = input; }} 
            />
        );
    }
}

export default Input;

不支持 svg canvas繪圖元素

如圖，繪制連線

示例

正常情況下，使用svg 或者 canvas 很容易實現(xiàn)，但是由于ie8不支持，我們只能選用其它方式。

解決方法：使用vml 元素。
在這里 我們使用了 zrender這個庫。 ( "zrender": "3.6.1" )

import zrender from 'zrender';
import Line from 'zrender/lib/graphic/shape/Line';
import 'zrender/lib/vml/vml.js'; // ie8

具體代碼實現(xiàn)方式，請看點擊這里 zrender.js。

謝謝閱覽，歡迎指教。