REM bug in Ie11 and Edge browser

Recently in the project, in order to respond to the operation, with the emergence of a new unit--rem, in the mainstream browser is no problem. But there is a supernatural bug in IE.

Bug statement: When the page is loaded, all elements of the page are not displayed according to the REM value computed by the corresponding JS obtained. However, when the mouse hovers over the corresponding element, it will show itself according to the corresponding calculated value, and the flashing bug will appear.

Because the above code also has the Resize function, if the BODY element is not added font-size:100%. The font-size size of the previous time is always recorded when the window is changed. When debugging, it becomes normal. Also need to clear the cache, exit the browser to continue to view the bug.

After adding the body style is normal, it is estimated that under IE11 can not get the dynamic modified HTML inline style, body has been the default browser font-size:14px. So the font becomes very small. The body{font-size:100%} inherits the parent element size, and it is ready.

Body {
  font-size:100%
}

But according to REM, REM is not calculated based on HTML font-size. Why do you have to set body? The problem remains to be solved.

description : The font size unit REM Creates a chase size that is equivalent to the already declared base font size in the HTML or BODY element, and is relative to the built-in font size if the base font size is not declared.

In addition: under the browser of Google Firefox kernel, the default size of the root element text is defined 2 times before the page is rendered. The first time is a CSS definition. The second time is the JS calculation. The last font size used is the latter. But it seems that in IE browser, IE recognized the former. This may be related to the reading order of Internet Explorer and other browsers.

you are welcome to learn from each other Exchange

Description: Reprint please contact the author and obtain the author's authorization, and also indicate the address and author of the reprint