Introducing IE8: The good, the bad, the (not so) ugly

Browsers come out every day. Webkit has a nightly build. Wireless devices come with their own, often unique, browsers. Even with the plethora of available browsers, Internet Explorer, a browser that is not regularly updated, has over 55% of the browser market. Internet Explorer 6 (IE6), which came out eight years ago, still holds 9% (between 6% and 18%, depending on where you look) of the browser market share. IE8 was released only in March 2009, and by July 2009, it already had 17.8% of the browser market share.

In this article, we take a look at the IE8 browser, and cover some tips and tricks to make sure your sites look good in both old and new browsers. Will cover many of the topics hilited below in greater depth in the next sections of the "Welcome to IE8" series.

CSS 2.1 Support

IE8 has complete support for CSS2.1. In fact, IE8 is the first browser to support all of the W3C CSS2.1 specifications. IE8 passes the Acid2 browser test. You can learn more about the Acid2 test from the web standards project. In brief, it’s test page designed to expose browser CSS2.1 rendering flaws, including testing transparent PNGs, generated content, the box model, and positioning, among others. While other browsers have been passing this test since 2005, Internet Explorer didn’t pass the Acid2 test until the release of IE8 on March 19, 2009. I guess late is better than never.

Internet Explorer 8 supports all CSS 2.1 Selectors

By having complete support for CSS 2.1, IE8 has a lot of improvements over IE7 and IE6 in terms of CSS support. We will take a look at the individual CSS2.1 selectors, and how IE6, IE7 and IE8 compare later in this series. The important things to note are that IE8 supports the :hover pseudo class on all elements, not just links as in previous versions. IE8 also supports the :before and :after pseudo-elements, along with the CSS content and counter properties and values. See CSS3 Selectors and Browser Support for a grid of both CSS 2.1 and CSS3 selector support in all grade A browsers. We’ll be covering all the CSS2.1 selectors in the next section of this series.

Internet Explorer 8 supports all CSS 2.1 Properties and Values

With IE8’s complete support for CSS 2.1, Microsoft Internet Explorer has finally entered the realm of "standards compliant" browsers. IE8 has made great improvements over IE7 and IE6 in terms of CSS property and values support, almost completely supporting the CSS 2.1 specifications. IE8, however, like IE7 and IE6, has no support for any CSS3 properties or values. We will take a deeper look at CSS2.1 properties and values later in this series. In addition to supporting the W3C boxmodel (padding, width, margin) which is discussed next, some hilites include IE8’s complete support of outline, content, z-index, border-spacing, caption-side and empty-cell and support for more values of the display, list-style-type and white-space properties. See my list of CSS properties and values and browser support for a more detailed list of all the properties, values and browser support. We’ll go into greater detail on some of these CSS improvements in the next sections of this series.

Internet Explorer 8 supports the W3C Box Model

Microsoft finally got the W3C box model correct. While you may disagree with the W3C box model, and may think Microsoft, not the W3C, got it right, it is important to follow the standards.

IE8 and all non-IE grade-A broswers use:

total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

but IE6 and IE7, when not in browser standards compliant mode use:

total width = margin-left + width + margin-right

If you really love the IE box model, you can still implement it with:

-ms-box-sizing: border-box;

That’s about all we need to know about the box-model and IE8, so I will not be elaborating on this in future sections.

IE8 Developer Toolbar

IE8 comes with a developer toolbar. The developer toolbar is an improvement on the debugging tools of previous IE versions. It’s an apparent imitation of the Firebug extension for Firefox, but not as robust. Similar to Firebug, you can highlight an element and can edit CSS on the fly. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property.

IE7 Compatibility View

The IE8 chrome provides a button to enable IE7 compatibility view. Compatibility View forces Internet Explorer 8 to display content as if the user were using IE7, with all of IE7’s quirks, hacks and errors.

The weird thing about using this button is that Microsoft actually keeps tabs on it: information is sent to microsoft whenever you press that button, unless you set your preferences otherwise, and lets MS know that "a lot of people are switching rendering modes" for that domain. Microsoft actually keeps a list of websites that these staticstics "prove to them" are best displayed in Compatibility View. Microsoft construes our clicking of that IE7 compatibility view button as feedback that the site doesn’t render right in IE8.

Forcing IE7 of IE8 rendering mode

As mentioned above, IE8 provides the user the ability to change how they view websites: providing the ability to switch back and forth between IE8 and IE7. You can override this, and force the site to be rendered either as IE8 or IE7 (your choice) within the IE8 browser, disabling the IE7 Compatibilty view botton.

To force IE8 rendering mode:

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

To force IE7 rendering mode:

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

IE8 bugs

IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.

IE8 CSS Hack

This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.

p.myclass {
color: green;
*color: red;
}
body:last-child p.myclass {
color: blue;
}

Conditional comments still work in IE8. Just note that if you used the conditional comment of

<!--[if IE]>
  IE only information here
</![endif]-->

The above will also be read by all Internet Explorer versions, past current and future. If you’ve included this in past websites, check to make sure your sites still work. If you find issues, simply change the [if IE] to [if lte IE7] for if less-than or equal to IE7.

Other Features:

  • Full ARIA (accessible rich internet applications) support
  • hasLayout is no longer a factor
  • <object> nesting, or fallbacks, has been implemented correctly. See the HTML Object element for more information.
  • Native JSON (JavaScript Object Notation) support
  • The ‘style’ property is available via the DOM
  • Supports getElementByName(‘formElementName’);
  • CSS styling of the <legend> element is now supported
  • Supports data URI schema value. Wikipedia does a good job of explaining data URI schema.

Published by

Estelle Weyl

My name is Estelle Weyl. I an open web evangelist and community engineer. I'm a consulting web developer, writing technical books with O'Reilly, running frontend workshops, and speaking about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via @estellevw.