WP-Mix

A fresh mix of code snippets and tutorials

Targeting different versions of IE

Honestly I can’t stand Internet Explorer. But people still use it, so here’s a few ways (via jQuery & CSS) to target different versions of IE.

Target IE9 only with jQuery

Target IE9 only with jQuery

CSS
if (document.all && document.addEventListener) { $('html').addClass('ie9'); }

Target less than IE9 with jQuery

Target less than IE9 with jQuery

CSS
if($.browser.msie && $.browser.version < '9.0'){ $('html').addClass('not-ie9'); }

Target IE6 and IE7 with CSS

Target IE6 and IE7 with CSS:

CSS
/* target IE6 and IE7 */ * html pre { padding-bottom: 25px; overflow-y: hidden; overflow: visible; overflow-x: auto; } *:first-child+html pre { padding-bottom: 25px; overflow-y: hidden; overflow: visible; overflow-x: auto; }

Targeting IE with conditional comments

IE’s conditional comments are an ideal way to target just about any version. Any/all of the following code may be placed in the <head> section of your web pages.

HTML
<!--[if !IE]><!--> <!-- NOT IE --> <link rel="stylesheet" href="lib/not-ie.css"> <!--<![endif]--> <!--[if gte IE 9]> <!-- IE version 9 or better --> <link rel="stylesheet" href="lib/ie9+.css"> <![endif]--> <!--[if IE 9]> <!-- IE9 --> <link rel="stylesheet" href="lib/ie9.css"> <?php } ?> <!--[if lt IE 9]> <!-- Less than IE9 --> <link rel="stylesheet" href="lib/ie-old.css"> <![endif]-->

Note that conditional comments work when placed anywhere in the HTML document, not just the <head>, as it were.

★ Pro Tip:

Digging Into WordPressGA Pro

Tweet this!