When ostracizing older versions of Internet Explorer isn't an option, it's important for developers to educate themselves about the pitfalls. The following section outlines a few tips and tricks:
- Use a CSS Reset file. This file attempts to reset the format of all HTML elements to a consistent baseline. CssReset.com provides a list of common reset files used on websites. This is an important first step in cross-browser development.
- Become familiar with quirks mode and doctypes. These options define how a browser will interpret the CSS on a web page. QuirksMode.org provides a deep dive into the explanation and differences between the options.
- Get comfortable with the "Developer Tools" toolbar available in IE9/10. It can provide a representation of a web page in older versions of IE. The word "representation" is key. It is not the complete engine from an older version. Some nuances do exist. Additionally, be aware that "compatibility mode" falls under these same parameters. The browser and document mode are invaluable due to the difficulty of installing multiple versions of IE on the same computer.
- Support for different CSS styles varies heavily in older versions of IE. QuirksMode.org provides an excellent worksheet of styles and their applicable browsers. For instance, IE7 struggles to support many table styles and selector options.
- Do not lay out a web page with older versions of IE in mind. Build for modern browsers, then utilize conditional comments to target problem areas. Modern designs require floating elements through CSS. Unfortunately, older versions of IE struggle with this. The website Css-Class.com provides a comprehensive demonstration of these issues.
- Older versions of IE have support for newer CSS options such as gradients and opacity, but they utilize a proprietary set of styles under the "filter" attribute. MSDN provides a detailed series of examples on this feature. This attribute can be used along with modern styles (which older versions of IE will ignore) to provide a consistent look between browsers.