IE Display Issue

The other day, there was a strange IE display issue with my company's online help. Our help is published to HTML output to the several help servers that included six testing help servers and one production server. The help in the production server was displayed fine with IE, but the help pages in all the testing environments were displayed funny, where the top and bottom were blank and only the middle part showed up. There was no problem to display the page with all the other browsers, such as Firefox and Chrome. The help pages are just static HTML with simple JaveScripts, such as Google Analytics codes, and CSS.

When the issue was discovered by QA, at first I thought it must be the configurations in the testing environments were changed recently that had cause the issue. Otherwise, why the exactly same files in the production were totally displayed fine by IE.

I then contacted the IT department who was in charge of the servers and asked if they had changed anything in the testing environments. They denied that it was their configurations in the servers that caused the problem and  insisted that it must be the JavasScripts and CSS in my help pages caused the issue. It could be, but it was very difficult to identify the problem since the production was fine, and to make things even more complicated, not all the computer's IE had the display issue. My home computer's IE displayed the help page just fine. In addition, if I opened the HTML help files by IE locally in my personal computer, there was no problem at all. So every time when I modified the help file, I had to deploy it to the testing help server to see the change.

I deleted all the JavaScripts code in the help file, but the problem still existed. I then deleted the external CSS links, the page became normal in IE, which seemed like it was the CSS that caused the problem. I thought it must be one specific class that was unable to be rendered by IE. Therefore, I removed one class at a time from the testing page to see the outcome. Finally, I was able to identify which class caused the problem, but it didn't help. The class was very simple, all it had was a background color is black. Nothing wrong with it but the IE displayed the background color as white, which made the top looked like blank. I then gave up the idea of the CSS's problem. There must be something else.

Meanwhile, someone in the IT discovered that there was a help page didn't have the IE display issue in the testing environments. The page was the homepage of another help system, which was manually created by me and was not as other pages that were automatically generated by my help publishing tool. I checked that page which had the same JavaScripts and CSS with others. I then checked the other tags in the page. To my surprise, there was different metadata tag in that file, which was < meta http-equiv="X-UA-Compatible" content="IE=9" />. I didn't know why I put it there initially. According to Microsoft, the meta tag forces a webpage to be rendered in IE 9 mode, which seemed have nothing to do with displaying CSS back background color to white. However, when I included this meta tag into my other help pages, the help pages finally were displayed normal by IE!

It was a relief, but I still don't understand why.