Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

228970 Resource 187691 21 21 1237472740774 1237474165943 Controlled Web Developer Tip: X-UA-Compatibility Header Simplifies Life with IE8

Another version of IE to support means more developer headaches. But there's a little known bit of magic that helps ease the pain.

If you are responsible for a commercial web site or web application, you understand too well that there are significant differences between web browsers.  Creating and maintaining a web site or web application that is truly cross-browser compatible is both a skill and and art.  And now there's a new browser on the scene:  Internet Explorer 8 ("IE8"). Just to keep web developers jumping, Microsoft decided to change the behavior of some extremely fundamental aspects of the browser.  For example, the "onresize" event is the notification event that applications rely on to determine when something in the browser changes size, e.g., when a user resizes the browser window, an application may need to do something to adjust for the new window size.  In its infinite wisdom, Microsoft decided to change the default behavior of this event.  Never mind that millions of web pages rely on the long established behavior as implemented by IE7 (and IE6, IE5, IE4, Firefox, Safari, Opera, Chrome, etc.). Well, as it turns out, the new behavior could cause the MyST Blogsite editor to hang in an infinite loop.  (Technically, it was processing an infinite cascade of onresize events.) Fortunately, Microsoft also added a "Compatibility View" feature to IE8 that forces IE8 to behave more like IE7—that is, to be compatible with the millions of web pages that were tested against IE7 but now break under IE8.  Unfortunately, they did not make Compatibility View the default.  In other words, the default is non-compatibility.  (Silly.) After doing a little Googling, I ran across <a title="Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8" href="http://alistapart.com/articles/beyonddoctype" target="_blank">this article</a>, by Aaron Gustafson, that provides a hint about how to force IE8 to use Compatibility View for a web page automatically, without requiring the user to mess with browser options. <h3></h3> <h3>X-UA-Compatible Header</h3> Here's the magic. IE8 recognizes a new HTTP response header that tells IE8 which browser(s) the web page has been tested against.  In other words, with which browser(s) the web page is compatible.  Specifying a value of "IE=7" means the web page is compatible with IE7 and causes IE8 to automatically process it using its Compatibility View. Alternatively, you can specify the X-UA-Compatible details by placing an http-equiv <code>meta</code> element within the web page itself: <blockquote><pre><meta http-equiv="X-UA-Compatible" content="IE=7" /></pre></blockquote> If you use the <code>meta</code> element approach, you must ensure that the tag appear early in the head section of the page.  Specifically, it can be preceded by other <code>meta</code> elements and the <code>title</code> element, but will need to be placed above any other elements—and you can’t add it into the DOM via JavaScript. Once I added the <code>meta</code> element to the MyST Blogsite rendering framework (which is all XSL, so adding it was very simple), we were able to close all support issues related to IE8 compatibility issues.  And, I was able to stop pulling my hair out. 9 application/xml browser compatibility developer IE7 IE8 Internet Explorer software user-agent web Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 Aaron Gustafson describes how to use IE8's new X-UA-Compatible support to achieve backward compatibility with IE7 http://alistapart.com/articles/beyonddoctype false Once I added the meta element... we were able to close all support issues related to IE8 compatibility issues. And, I was able to stop pulling my hair out. MySmartChannels/6 (mailto:info@myst-technology.com; MyST Blogsite MetaWeblog API 6.00.0110) 127.0.0.1 127.0.0.1 aseidl 205.145.142.200 false true false false true 188081 false false true false false false true 232104 Resource 188081 173239 21 1242249164040 1242250280882 Controlled RE: Web Developer Tip: X-UA-Compatibility Header Simplifies Life with IE8

Thank you!

Thank you so much for that tip!  I'm a newbie web developer and was tearing my hair out because my standards-compliant code was misbehaving on IE8 and I had no idea what to do.  That meta tag is a life-saver. 10 application/xml false Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) 127.0.0.1 127.0.0.1 aseidl 68.40.167.222 false true false false true 187691 blog blogsite/FASeidl/web