Internet Explorer - Targeting Older Browsers in CSS

From PiRho Knowledgebase
Jump to navigationJump to search

Older versions of Internet Explorer (IE6–IE9) required special handling because they pre‑dated many CSS standards and implemented others inconsistently. Over time, developers created a variety of techniques — some official, some accidental — to reliably target these browsers when applying compatibility styles. This article documents those techniques, why they existed, and how to use them safely when maintaining legacy systems.

Context

Internet Explorer occupied a dominant position during the early evolution of CSS, but each version supported a slightly different subset of the specification. Common issues included:

  • Missing support for selectors and layout properties
  • Incorrect box model calculations (notably IE6)
  • Partial or experimental standards implementations
  • Rendering quirks depending on Doctype or Compatibility Mode

Because of this, “targeting” older IE versions became a normal and necessary part of front‑end development, especially for enterprise environments where browser upgrades lagged behind.

This article focuses on safe, deterministic techniques that allow developers to apply CSS fixes without disrupting modern standards-based layouts.

Targeting Specific Internet Explorer Versions

1. IE Conditional Comments (IE5–IE9)

Conditional comments were a Microsoft‑specific feature that allowed HTML to selectively load scripts or stylesheets. These work only up to IE9.

Example: Targeting IE8 and Below ```html ```

Example: Target Only IE7 ```html ```

Pros:

  • 100% reliable
  • Does not interfere with standards-based CSS
  • Easy to remove later

Cons:

  • Does not work in IE10+
  • Pollutes markup (though acceptable for legacy work)

2. CSS Hacks (Selector Bugs & Parsing Exploits)

Various versions of IE exhibited parsing bugs that allowed CSS rules to be written in ways that only that version understood. These were never “official”, but became widely used.

Targeting IE6 ```css

  • html .container { width: 960px; }

_html .box { height: 200px; } ```

Targeting IE7 ```css .container { width: 960px; }

  • +html .container { width: 940px; }

```

Targeting IE8 ```css html>/**/body .item { padding: 10px; } ```

Targeting IE9 ```css @media screen { 

   .box { background: yellow; }

} ```

3. Downlevel-Revealed Conditional Stylesheets

```html not-ie.css ``` Useful when giving modern browsers the main stylesheet and patching IE separately.

4. Feature Detection Instead of Browser Detection

By IE9–IE11, the preferred method was feature detection using tools like Modernizr.

Example: ```css .no-flexbox .container { float: left; } ```

Practical Application

Legacy enterprise systems may still require IE targeting:

  • IE8-compatible SharePoint portals
  • Embedded/XP-based thin clients
  • Legacy intranet systems

Recommended Strategy

1. Give modern browsers the full standards experience. 2. Contain IE hacks inside isolated files. 3. Prefer conditional comments. 4. Use CSS hacks only as a last resort. 5. Test in actual browsers (IE emulation is unreliable).

Common Pitfalls

  • Hacks break during minification.
  • Conditional comments removed in IE10+.
  • Compatibility Mode complicates version targeting.
  • CSS resets may trigger unexpected behaviour in IE6–IE8.

Design & Architecture Considerations

  • Keep IE styles in a separate directory.
  • Document all hacks used.
  • Treat IE as a separate rendering engine.

Related Topics

References

Retrieved from "https://knowledgebase.pirho.net/index.php?title=Internet_Explorer_-_Targeting_Older_Browsers_in_CSS&oldid=343"