Skip to content

Same Markup, Same Browser, Different Results

February 23, 2011

Here is a simple HTML5 page I created:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Inconsistent Rendering</title>
</head>
<body>
 <span style="height: 1px; overflow: visible; background-color: Green;">
 <h1>This is a test.</h1>
 </span>
</body>
</html>

And here is that page rendered in Internet Explorer 8.  In one case it’s being served on my laptop, and the other on the local intranet.

Test file on localhost

Test file on intranet

The markup, the Web servers, and the browser are all set up 100% the same.  These should be identical, shouldn’t they?  What’s the problem?  The answer is Compatibility View.

Compatibility View is a “feature” of Internet Explorer that causes it to ignore modern Web standards.  That would be fine, except Compatibility View settings vary by zone, and different zones have different defaults.  Also, the Compatibility View button in the address bar isn’t always available, which means there’s no visual indicator as to what mode you’re in, and you can’t change modes for the current page easily.

Compatibility View settings can be accessed in the Tools –> Compatibility View Settings menu, but if you’ve developed a standards compliant intranet site, you need a better fix than simply asking each individual user to reconfigure their browser.  Group Policy is one option, but there is a much simpler solution.  Just add the following meta tag to your pages, and it will force IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.

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

If you’re experiencing rendering inconsistencies with the same markup being served from different environments, have a look into Compatibility View. It just might be the culprit.

Advertisements

From → Uncategorized

2 Comments
  1. Paul permalink

    Thank you very much for this information. I was going nuts trying to work out why my HTML tables (fixed header, scrollable body) wasn’t rendering consistently across the organisation. This meta tag did the trick.

    • You’re welcome. Compatibility View can cause a lot of confusion – in my opinion there should always be a clear indicator of what mode you’re in.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: