I have used the X-UA-Compatible before, but I was not aware that by default the compatibility mode goes directly as far back as IE 7 rather than one off from IE 10 to IE 9.
After testing all the code, I clicked on the compatibility option and realize that, all my CSS Div tag float options at wrong positions.
I was a bit horrified that my code is broken even for the one off “IE 9” browser, but than I realize to open up the “Developer Tools” by pressing the “F12” key. It showed me that my default compatibility option is “IE 7” and not “IE 9”.
After researching few pages, testing multiple options, I came to agree on this meta tag. It has to be placed inside the “head” tag, otherwise it may not work well.
Basically I selected it to default to latest browser if possible (“edge”) or one off till it reaches “IE 8 Compatibility Mode”.
I have not tested if the versions needs to be placed from left to right in increment. For me it just makes it easy to update in future, like if I needs to add “IE 10” or “IE 11” in future.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8;IE=8;IE=EmulateIE9;IE=9;IE=edge">