IE9及如下浏览器升级提示

在使用react的项目中通常都有兼容性问题,特别是使用了组件库好比element-react或者ant-design等等,在ie下多少都会有点小问题,好比样式不正确,或者组件功能失效,甚至白屏等问题。html

IE白屏问题

通常状况下,白屏的问题在index.html中引入这两个js就能解决react

<!--兼容ie9-ie10-->  
<script src="./es6-sham.min.js"></script>  
<script src="./es6-shim.min.js"></script>

解决 create-react-app IE 兼容性问题git

es6-shimes6

IE低版本浏览器升级提示

可是在更低版本的IE浏览器中仍是会白屏。这个时候最好友好的提示用户升级浏览器即刻。
在index.html加入如下代码,在ie9及如下会出现浏览器升级提示.github

<script>  
  //浏览器版本太低 提示升级 低于ie 10的都会提示  
  (function (w) {  
  if (!("WebSocket" in w && 2 === w.WebSocket.CLOSING)) {  
    var d = document.createElement("div");  
  d.className = "browsehappy";  
  d.innerHTML = '<div >为了改善你的体验,请升级你的浏览器</strong><a target="_blank" href="http://browsehappy.osfipin.com/" >点击此处升级</a></div>';  
  var f = function () {  
      var s = document.getElementsByTagName("body")[0];  
  if ("undefined" == typeof(s)) {  
        setTimeout(f, 10)  
      } else {  
        s.insertBefore(d, s.firstChild)  
      }  
    };  
  f()  
  }  
}(window));
</script>

ie10及以上

ie10及以上正常显示页面,没有升级提示.web

ie9

ie9提示以下: 有浏览器升级提示,且页面可以正常展现
image.pngchrome

ie8及如下

ie8及如下提示以下:有浏览器升级提示,页面js有报错,致使页面白屏了。
image.pngsegmentfault

暂时先简单的进行ie低版本处理浏览器

html头部建议

建议在html 的 head加入如下代码,360浏览器会默认使用极速模式(webkit)app

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta name="renderer" content="webkit">
相关文章
相关标签/搜索