Add the X-UA-Compatible line set to IE=edge at the top of every page's head, or send it as a server header. It asks Internet Explorer to use its newest mode even when Compatibility View is switched on.

Fine everywhere but the customer's desk

A manufacturer launches a new website. It looks right on the office computers, on phones and at home, and then a customer's buyer emails a screenshot.

On the buyer's screen the menu overlaps the page heading, columns meant to sit side by side are stacked, and the quote form's buttons sit on top of each other.

The buyer uses Internet Explorer 11, the same version the manufacturer tested. The difference is a setting: on that computer the site is shown in Compatibility View.

What Compatibility View does

Internet Explorer 8, 9, 10 and 11 can draw a page the way Internet Explorer 7 did. The feature exists so that sites built years ago for version 7 keep working.

Version 7 understood far less of the layout code current sites use. A modern page drawn by its rules loses the instructions that place menus, columns and buttons, so they fall where they can.

Nothing on the page says this is happening. The buyer simply sees a new site that looks broken.

How it gets switched on

Compatibility View can be turned on in several ways, most of them outside the website owner's control:

The last is the only one the site controls directly, and it is worth checking first, since templates copied from older sites sometimes carry the request along.

Why office computers in particular

Many companies still run an internal ordering, timesheet or inventory system built for Internet Explorer 7. Rather than rebuild it, the IT department sets the browsers to use Compatibility View.

The setting is meant for that one system, but depending on how it is applied, it can catch every site the staff visit, including yours.

Home computers and phones rarely have any of this, which is why the site looks fine everywhere the manufacturer thought to test.

The one line

A page can ask Internet Explorer to use its newest mode. The request is one line in the head of the page, a meta tag named X-UA-Compatible with the value IE=edge.

Here edge means the newest mode that version of the browser has, nothing more. Internet Explorer 11 then draws the page as version 11 in most setups, Compatibility View or not.

The same instruction can be sent by the server as a header with every page. That form is often more reliable, because the browser reads it before any of the page's code.

Where the line goes

The meta tag has to come near the very top of the head, after the character set and before any scripts or stylesheets. Placed lower down, it can be ignored.

On a site built with WordPress, Joomla or Drupal, it belongs in the theme's header template, so every page gets it. The server header is set once in the hosting configuration.

A worked example

A metal plating shop in an industrial park finishes parts for machine shops, equipment makers and aircraft parts suppliers, with zinc, nickel and hard chrome.

Its new site went live in June with a services menu and a quote form for drawings and quantities. Within a week two customers' buyers sent screenshots of a scrambled page.

Both companies used Internet Explorer 11 with Compatibility View applied by their IT departments to keep an old ordering system working. The new site's template had no X-UA-Compatible line.

The developer added the header in the server configuration and the meta tag at the top of the template, so both forms of the request reach the browser.

On a test computer with Compatibility View forced on for the site, the developer tools now show the page in the newest mode. One of the buyers reloaded it and confirmed.

Nothing changes on the customers' computers. Their ordering system stays in Compatibility View, and the plating shop's site asks for, and gets, the newest mode.

Testing it

Internet Explorer's developer tools, opened with the F12 key, show the mode a page is using. In version 11 it is on the Emulation tab, as Document mode.

To test, turn Compatibility View on for the site deliberately, reload, and check the document mode. With the line in place, it should still show the newest version.

Then look at the page itself in that state: menus, columns, forms and anything that moves. The document mode can be right while a script elsewhere still misbehaves.

What the line cannot fix

A few companies force particular sites into an older mode on purpose, through a managed list the line cannot overrule. Only their IT department can change that.

The line also cannot make an old browser understand code it never knew. Internet Explorer 8 is still common on office computers, and a page needs a plan for what it cannot do.

The counter-case

A site visited mostly on phones and home computers may never meet Compatibility View, and a simple older layout can look much the same in version 7 mode.

Yet the line is harmless, takes minutes to add, and protects the one visitor at a large customer whose computer happens to have the setting on.

So it belongs in every new site's template as a matter of course, and in any older site whose visitors include people at desks in larger companies.

Asking for the newest mode

  1. Check the template for an old compatibility request.
  2. Add the X-UA-Compatible line near the top of the head.
  3. Send the same header from the server.
  4. Turn Compatibility View on for the site in a test browser.
  5. Confirm the document mode in the developer tools.
  6. Test in Internet Explorer 8 if customers still use it.
  7. Ask one affected customer to reload and confirm.

Step four is what makes the test honest. A site checked only on computers without the setting will pass every time, which is exactly how this problem reaches customers.

A site written the other way round, for Internet Explorer and no other browser, gets its own teardown in an accounting office site that only works in Internet Explorer.

Frequently asked questions

What is Compatibility View?

A mode in Internet Explorer 8 to 11 that draws pages the way version 7 did, so old sites built for version 7 keep working. Newer sites usually break in it.

Why does it affect office computers more than home ones?

Companies often switch it on for old internal systems, and network settings can make outside sites look like intranet sites. Home computers rarely have either setting.

What is the line that fixes it?

A meta tag named X-UA-Compatible with the value IE=edge, near the top of every page's head, or the same instruction sent by the server as a header.

Where does the meta tag go?

In the head, after the character set and before any scripts or stylesheets. Lower down it can be ignored, which is why a server header is often more reliable.

How can I tell which mode a page is using?

Open Internet Explorer's developer tools with F12. Version 11 shows the document mode on its Emulation tab; versions 8 to 10 show it in the tools' top bar.

Can the line override every company setting?

Not all of them. Some companies deliberately force particular sites into an older mode through a managed list, and only their IT department can change that.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Customers sending screenshots of a scrambled site?

Send us one of the screenshots and your site's address, and we will check the template and add the line if it is missing.

Start a Conversation