In projects using react, there are generally compatibility problems, especially when component libraries are used, such aselement-react
perhapsant-design
Wait, 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">