IE9 and below browser upgrade tips

In projects using react, there are generally compatibility problems, especially when component libraries are used, such aselement-reactperhapsant-designWait, there will be some small problems under ie, such as incorrect style, component function failure, or even white screen.

Ie white screen problem

Generally, the problem of white screen can be solved by introducing these two JS in index.html

<!-- Compatible with ie9-ie10 -- >  
<script></script>  
<script></script>

Solve the IE compatibility problem of create react app

es6-shim

Ie low version browser upgrade tips

However, the screen will still be white in the lower version of IE browser. At this time, it’s best to friendly prompt users to upgrade their browser immediately.
Add the following code to index.html, and a browser upgrade prompt will appear at IE9 and below

<script>  
  //If the browser version is too low, you will be prompted if the upgrade is lower than ie 10  
  (function (w) {  
  if (!("WebSocket" in w && 2 === w.WebSocket.CLOSING)) {  
    var d = document.createElement("div");  
  d.className = "browsehappy";  
  d. InnerHTML = '< div > to improve your experience, please upgrade your browser < / strong > < a target = "_ blank" href=" http://browsehappy.osfipin.com/ "> Click here to upgrade < / 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 and above

Ie10 and above normally display pages without upgrade prompt

ie9

IE9 prompts are as follows: there are browser upgrade prompts, and the page can be displayed normally

IE8 and below

IE8 and the following prompts are as follows: there is a browser upgrade prompt, and an error is reported on the page JS, resulting in a white screen.

For the time being, simply handle the IE low version

HTML header suggestions

It is recommended to add the following code to the head of HTML, and 360 browser will use WebKit by default

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta name="renderer" content="webkit">