By: Estelle Weyl
Page 1 of 2
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. We'll cover many of the topics highlighted 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 a 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 box model (padding, width, margin) which is discussed next, some highlights 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 browsers 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:
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.