Laser Targeting IE with WordPress

Here is a way to finely target IE to your heart’s content in WordPress (but you could easily adapt for plain HTML).

Add the following to your head, replacing your opening <html> tag:

<!--[if IE 7 ]><html <?php language_attributes(); ?> class="no-js ie ie7 ltie8 ltie9">
<!--[if IE 8 ]><html <?php language_attributes(); ?> class="no-js ie gtie7 ie8 ltie9">
<!--[if IE 9 ]><html <?php language_attributes(); ?> class="no-js ie gtie7 gtie8 ie9">
<!--[if (gt IE 9)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js gtie7 gtie8 gtie9 modern-browser">

This method adds a loads of classes that you can use to target IE after you’ve targeted normal browsers.

Example

In the example below I know that when I move the nav around it messes up in Internet Explorer 7. This is probably a bug that I would rather not waste time fixing, choosing to dedicate my time to working on advanced CSS3 for modern browsers.

Normally I would write two sets of rules (one for normal browsers, and one to neutralise IE7), but with our extensive targeting classes I can simply target browsers outside and above IE7 using the gtie7 (greater than IE7) rule.

.gtie7 #nav {
  right: 440px;
  top: 26px;
}

It’s important to note that these classes are more for targeting buggy behaviour. If you’re looking to change layout for less capable browsers then consider using feature detection with Modernizr.

Leave a comment

Your email address will not be published

Leave a comment