Jayesh Patel
Filed under - CSS, Design, Other Stuff, Web Designer Help
No Comments so far. Add yours now

For this reason, it’s more than likely that the only CSS hacks you’ll need are for IE7 and IE8. Firstly, if you follow some basic CSS coding principles, then you might very well need no hacks or workarounds for IE7 and IE8. For the design of this blog, I currently have zero very few IE-specific hacks — so it’s obviously possible to get by without relying too strongly on hacks. (Update: I’m no longer supporting IE6 on this site, so that does help greatly).

Nonetheless, many beginners may need ways to target IE7 and/or IE8. Here I outline the best methods for doing so.

 

The best method, by far, is the conditional classes technique popularized by Paul Irish. Here’s how you do it:

  1. <!–[if lte IE 7]> <html class=”ie7″> <![endif]–>
  2. <!–[if IE 8]>     <html class=”ie8″> <![endif]–>
  3. <!–[if IE 9]>     <html class=”ie9″> <![endif]–>
  4. <!–[if !IE]><!–> <html>             <!–<![endif]–>

This uses conditional comments to target certain versions of Internet Explorer, and the <html>element receives a custom class name for different versions of IE, and no class name when the browser is not IE.

Then in your CSS, you would target IE7 or IE8 like this:

  1. .element {
  2.     margin-bottom: 20px;
  3. }
  4. .ie7 .element {
  5.     margin-bottom: 10px;
  6. }
  7. .ie8 .element {
  8.     margin-bottom: 15px;
  9. }

Every browser will have a bottom margin of 20px on the element in question, but IE7 and IE8 will have a bottom margin of 10px and 15px respectively.

It’s important to note here that although targeting IE is necessary at times, I strongly suggest you try to find a better way to fix any browser differences, and avoid using conditional classes or any of the hacks mentioned below, if at all possible. Sometimes you just need to rethink your CSS and possibly your markup, and you can avoid this extra code from the start.

CSS Hacks

Another way to target IE7 or IE8 is using hacks.

First, how to target IE7 only. There are probably more than just two ways to do this, but here are two (which is really all you’ll need):

  1. * + html .element {
  2.     margin-bottom: 10px;
  3. }

(Thanks to Anthony for the tip on this first one, above)

The hack is the part of the selector that comes before .element. No other browser will recognize that selector, so the 10px bottom margin will only appear to users of IE7.

Here’s another less memorable method:

  1. *:first-child+html .element {
  2.     margin-bottom: 10px;
  3. }

Yet another way to target IE7 is like this:

  1. .element {
  2.     margin-bottom: 20px;
  3.     *margin-bottom: 10px;
  4. }

The “hack” is the asterisk at the start of the line of CSS that you want to apply to IE7. The only problem here is that this will also apply to IE6. So you should only use this if you know that this hack will look fine in IE6, or if you don’t care what it looks like in IE6. So if you’ve dropped support for IE6, then this should be fine.

From my research on this subject, there does not appear to be a way to target only IE8 (and not IE6, IE7, and IE9+) with a CSS hack. The only way seems to be using a conditional comment.

However, if you’ve dropped support for IE7, then you could use the following:

  1. .element {
  2.     margin-bottom: 20px;
  3.     margin-bottom: 10px\9;
  4. }

The “hack” is the \9 following the value and preceding the closing semicolon. This will target IE8 and below, so you should only use this as an IE8-only hack if you no longer support IE6 or IE7 (because both those versions will apply the style in this hack).

Conditional Comments

Finally, you could separate your CSS for IE7 and IE8 into separate files, using conditional comments, like this:

  1. <!–[if IE 7]>
  2. <link rel=”stylesheet” href=”ie7.css”>
  3. <![endif]–>
  4. <!–[if IE 8]>
  5. <link rel=”stylesheet” href=”ie8.css”>
  6. <![endif]–>

But I do not recommend you use this method. This has two main problems: First, it separates your CSS into three different files, making it much harder to maintain. And second, you’re adding extra HTTP requests in two of the slowest browsers, making your pages load much more slowly.

So my suggestion is to use either the conditional classes or else a simple hack to target IE7 or IE8.

Leave your comment

You must be logged in to post a comment.

Share IT © 2017. All rights reserved.