[SOLVED] Internet Explorer Web Browser Does Not Display Webpages Correctly. How Do I Fix the Website?

Amazon If you are a web developer and you've developed a website, try rendering it in the Internet Explorer web browser. If your website renders badly in the IE browser but renders perfectly in Firefox and Chrome, chances are your IE web browser is rendering your website in an old document mode such as IE7 or IE8.

Next, let's look at why IE automatically selects an old document mode. Then we'll look at how to modify your webpage's HTML markup or change your web server's HTTP header in order to instruct the Internet Explorer browser to always select the latest document mode.

Background

When IE tries to display a webpage, it will automatically set its document mode according to several rules. You can view these rules at https://msdn.microsoft.com/en-us/library/ff405803(v=vs.85).aspx at the time of the writing. To check which document mode your website is being displayed in, use the Emulation tool in F12 developer tools. To do that, press F12 to open up the developer tools panel, then press Control+8 to navigate to the Emulation tool tab. You should see the currently selected document mode in the drop down menu next to the label Document mode in the Mode section.

The best document mode to display your website in is Edge because it indicates the latest version of IE. If you see things like 8 or 7, read on to see how to make changes to your website so that IE will automatically select Edge as its document mode.

There might be a helpful hint or exclamation mark next to Document mode label and the drop down menu. You can click on it for more information as to why the document mode is automatically selected by IE.

Solution

There are several solutions, as described by the aforementioned Microsoft webpage. The easiest one is simply add the following line of HTML code inside your webpage's head tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

You must do this for every webpage of your website. If your website uses a framework which extracts the header code, you are in luck because you only need to make the change in one place. Otherwise, you must change the webpages one by one which can be time-consuming.

Once you are done, refresh your IE browser, and IE should automatically select Edge as the value of the document mode.

Alternatively, you can instruct your web server to add an HTTP response header name "X-UA-Compatible" with the value "IE=edge" and it should work too.

Questions? Let me know!