Rediscovering IE8 compatibility view 

Joined:
02/21/2009
Posts:
171

February 14, 2011 12:10:19    Last update: February 14, 2011 20:22:05
I have long noticed that IE8 displays a "broken page" icon while showing my web pages, but didn't pay much attention. Since the world in general considers IE to be broken, it's not so unlogical for IE to see much of the world as broken. Until one day I noticed that the Google home page was not "broken". Then I thought may be I should fix my pages also. So I moused over the "broken page" icon, and this is what I saw:



Compatibility View: websites designed for older browsers will often look better, and problems such as out-of-place menus, images, or text will be corrected.

Very descriptive indeed! Older browsers? Such as Firefox 1.5? When it comes to MS products, I often had better luck understanding the user-unfriendly versions of the story than these user-friendly versions. MSDN blog "Introducing Compatibility View" states:

When a web site says that it supports modern web standards, Internet Explorer 8 respects that and displays the site using its most standards compliant mechanism. In the majority of cases, this works out just fine. However, every once in a while, a page that says "display me using modern standards" really means "display me like Internet Explorer 7 used to display modern standards pages". This is where Compatibility View comes in.

Now I understand that a lot better! But that would be too much text to display for a tooltip. How about changing it to:

If you hacked your page to look good in IE7 but it appears broken here, click this icon to revert to IE7 compatible view!

The good news is, my pages were not broken after all, even though IE8 displayed a "broken page" icon. But how did Google manage to nil the "broken page" icon? It turned out they sneaked in a META tag to the HEAD:
<meta http-equiv="X-UA-Compatible" content="IE=8">


Compatibility View is turned on or off by domain. You can change it by going to the Tools menu and select "Compatibility View Settings". By default:
  1. All sites on the public internet display in Internet Explorer 8 Standards mode (Compatibility View off)
  2. All intranet websites display in Internet Explorer 7 Standards mode (Compatibility View on).
  3. All local pages such as "C:\tmp\testPage.html" display in IE8 mode (Compatibility View off). And IE8 does not allow you to turn compatibility on!


So, what exactly are the differences between IE7 standards mode and IE8 standards mode? I wasn't able to find a comprehensive list. But then it appeared to me that this may not be a fruitful trail to follow. Lest it be known that IE8 standards works better than IE7 standards. Below are some test pages for you to see some differences.
  1. A page with a list and a div (in IE8 standard mode):
    • Code
    • Demo
    <!doctype html>
    <html>
    <head>
            <meta http-equiv="X-UA-Compatible" content="IE=8">
    	<style type="text/css">
    	body {
    		font-family: sans-serif;
    		margin: 0;
    	}
    
    	ul {
    		list-style-type: none;
    		margin: 0;
    		padding: 0;
    	}
    
    	ul li {
    		float: left;
    		color: #F0F0F0;
    		border: 1px solid #ADADAD;
    		background-color: #909090;
    		padding: 0 10px 3px 10px;
    	}
    
    	div.container {
    		margin-top: 20px;
    	}
    
    	div.content {
    		clear: both;
    		border: #CCCCCC 1px solid;
    		background-color: #F0F0F0;
    		border-left: none;
    		border-right: none;
    		padding: 4px 12px;
    	}
    	</style>
    </head>
    
    <body>
    <div class="container">
    	<ul>
    		<li>List Item 1</li>
    	</ul>
    
    	<div class="content">
    	No gap between UL and DIV.
    	</div>
    </div>
    </body>
    </html>
    

  2. Same page in IE8 compatibility mode:
    • Code
    • Demo
    <!doctype html>
    <html>
    <head>
            <meta http-equiv="X-UA-Compatible" content="IE=7">
    	<style type="text/css">
    	body {
    		font-family: sans-serif;
    		margin: 0;
    	}
    
    	ul {
    		list-style-type: none;
    		margin: 0;
    		padding: 0;
    	}
    
    	ul li {
    		float: left;
    		color: #F0F0F0;
    		border: 1px solid #ADADAD;
    		background-color: #909090;
    		padding: 0 10px 3px 10px;
    	}
    
    	div.container {
    		margin-top: 20px;
    	}
    
    	div.content {
    		clear: both;
    		border: #CCCCCC 1px solid;
    		background-color: #F0F0F0;
    		border-left: none;
    		border-right: none;
    		padding: 4px 12px;
    	}
    	</style>
    </head>
    
    <body>
    <div class="container">
    	<ul>
    		<li>List Item 1</li>
    	</ul>
    
    	<div class="content">
    	20px gap between UL and DIV.
    	</div>
    </div>
    </body>
    </html>
    

  3. Add 1px border to list (IE8 compatibility mode):
    • Code
    • Demo
    <!doctype html>
    <html>
    <head>
            <meta http-equiv="X-UA-Compatible" content="IE=7">
    	<style type="text/css">
    	body {
    		font-family: sans-serif;
    		margin: 0;
    	}
    
    	ul {
    		list-style-type: none;
    		margin: 0;
    		padding: 0;
    		border: 1px solid #999999;
    	}
    
    	ul li {
    		float: left;
    		color: #F0F0F0;
    		border: 1px solid #ADADAD;
    		background-color: #909090;
    		padding: 0 10px 3px 10px;
    	}
    
    	div.container {
    		margin-top: 20px;
    	}
    
    	div.content {
    		clear: both;
    		border: #CCCCCC 1px solid;
    		background-color: #F0F0F0;
    		border-left: none;
    		border-right: none;
    		padding: 4px 12px;
    	}
    	</style>
    </head>
    
    <body>
    <div class="container">
    	<ul>
    		<li>List Item 1</li>
    	</ul>
    
    	<div class="content">
    	Gap is gone when you add a border to UL.
    	</div>
    </div>
    </body>
    </html>
    



One more reference:
Some Web sites may not be displayed correctly or work correctly in Internet Explorer 8 or in Internet Explorer 9 Beta
Share |
| Comment  | Tags