How to define or create style sheet only for Internet Explorer

Topic: HTML / CSSPrev|Next

Answer: Use IE Conditional style sheets

If you are a web designer you might have awful experience while dealing with the IE bugs. Most of the time you cannot escape from it, may be because of the project requirement or your client still using older version of the Internet Explorer (IE). So let's deal with it.

Every version of IE behaves somewhat differently than others. So what we do here is define separate style sheets for different versions of IE browsers to pin point the exact problem in a specific version.

Let's say the CSS property you have defined for some element doesn't work as expected in IE, but it works perfectly in other browsers like Firefox or Chrome. So basically what we do is define a style sheet that only target the IE browser and then we either adjust the value of that property or add some new property to this style sheet to fix this issue. Here's an example:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>IE Only Style Sheet</title>
<link rel="stylesheet" href="css/default.css">
<!--[if IE]>
    <link rel="stylesheet" href="css/ie.css">
    <h1>Define Style Sheet for IE</h1>
    <p>If you open this page in IE the output will be different.</p>

The opening and closing tags of the conditional style sheets are just regular HTML comments. In between the bracket conditional statements are placed which has the following meaning.

  • The meaning "IF" and "IE" are fairly obvious.
  • ! stands for "not", so !IE means "not IE".
  • gt stands for "greater than".
  • gte stands for "greater than or equal to".
  • lt means "less than".
  • lte means "less than or equal to".

IE Only Style Sheets

The conditional statements are probably the most common way create IE only style sheets in order to fix IE bugs especially in older versions. The following section summarizes the syntax for targeting the different versions of Internet Explorer browsers.

Targeting All Versions of IE

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/ie-only.css">

Targeting All Browsers Except IE

<!--[if !IE]>
    <link rel="stylesheet" type="text/css" href="css/all-except-ie.css">

Targeting Only IE9 Version

<!--[if IE 9]>
    <link rel="stylesheet" href="css/ie9.css">

Targeting IE9 and Higher Versions

<!--[if gte IE 9]>
    <link rel="stylesheet" href="css/ie9-and-higher.css">

Similarly, you can define style sheet for other versions of Internet Explorer.

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates