IE9浏览器兼容问题总结

1、ie浏览器中a标签嵌套的图片出现蓝色边框

<Link to="/">//react 中的写法
     <img style={{"cursor":"pointer"}} src={this.state.logo} />
</Link>

解决方案：img标签增加样式border:none

<Link to="/">
      <img style={{"cursor":"pointer",border:"none"}} src={this.state.logo} />
</Link>

2、chrome浏览器中样式，但ie9中页面无样式

原因：ie浏览器对css文件大小有限制，当前css文件太大，ie无法加载。

具体限制要求如下：

KB 262161 outlines the maximum number of stylesheets and rules supported by Internet Explorer 6 to 9.

• A sheet may contain up to 4095 rules
• A sheet may @import up to 31 sheets
• @import nesting supports up to 4 levels deep

更多详情（Stylesheet Limits in Internet Explorer）：
https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/

解决方案：

ie9样式表只能读取4095条规则，超出无法生效，就想下面的测试页面，ie9只能看到4094条红色，其他的是白色（即无样式）；
https://demos.telerik.com/testcases/4095issues.html

①css文件压缩和第三方插件库样式按需引入：

webpack打包时已经对css进行压缩，当前使用的是antd的UI框架，直接引入了整个antd的样式，因此安装插件babel-plugin-import改为按需引入，缩小了文件大小。
具体参见：https://www.jianshu.com/p/ccdb52ac6a41

至此，我的问题已经解决了，但如果css文件依然很大，就需要第②方案。

②打包时将css文件分成多个小文件，则需要引入css-split-webpack-plugin 分割文件。

参考文章：https://blog.csdn.net/Napoleonxxx/article/details/80292006

3、ie9中react的input输入框onChange事件报错，无法识别react事件对象中的event.target.value（undefined）

解决方案：

changeTelephone(event){
        /*兼容ie9*/
        let value=event.target.value||this.refs.telephoneInput.value;
        this.setState({
            telephone:value
        });
}

//jsx结构部分
<input 
      ref="telephoneInput"  className="rbanner_part_info_box" placeholder="请输入手机号" 
      value={this.state.telephone}  onChange={this.changeTelephone.bind(this)}
/>