How to define or create style sheet only for Internet Explorer

Topic: HTML / CSS« Prev|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 time you can't escape form it may be because of the project requirement or your client still using older version of Internet Explorer. So let's deal with it.

Every version of Internet Explorer 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.

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

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 for IE6, IE7, IE8 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">
  • <![endif]-->

Targeting All Browsers Except IE

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

Targeting Only IE8 Version

  • <!--[if IE 8]>
  •     <link rel="stylesheet" type="text/css" href="css/ie8.css">
  • <![endif]-->

Targeting IE8 and Lower Versions

  • <!--[if lt IE 9]>
  •     <link rel="stylesheet" type="text/css" href="css/ie8-and-lower.css">
  • <![endif]-->
  • <!--[if lte IE 8]>
  •     <link rel="stylesheet" type="text/css" href="css/ie8-and-lower.css">
  • <![endif]-->

Targeting IE8 and Higher Versions

  • <!--[if gt IE 7]>
  •     <link rel="stylesheet" type="text/css" href="css/ie8-and-higher.css">
  • <![endif]-->
  • <!--[if gte IE 8]>
  •     <link rel="stylesheet" type="text/css" href="css/ie8-and-higher.css">
  • <![endif]-->

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

Targeting Only IE7 Version

  • <!--[if IE 7]>
  •     <link rel="stylesheet" type="text/css" href="css/ie7.css">
  • <![endif]-->

Targeting IE7 and Lower Versions

  • <!--[if lt IE 8]>
  •     <link rel="stylesheet" type="text/css" href="css/ie7-and-lower.css">
  • <![endif]-->
  • <!--[if lte IE 7]>
  •     <link rel="stylesheet" type="text/css" href="css/ie7-and-lower.css">
  • <![endif]-->

Targeting IE7 and Higher Versions

  • <!--[if gt IE 6]>
  •     <link rel="stylesheet" type="text/css" href="css/ie7-and-higher.css">
  • <![endif]-->
  • <!--[if gte IE 7]>
  •     <link rel="stylesheet" type="text/css" href="css/ie7-and-higher.css">
  • <![endif]-->

Targeting Only IE6 Version

  • <!--[if IE 6]>
  •     <link rel="stylesheet" type="text/css" href="css/ie6.css">
  • <![endif]-->

Targeting IE6 and Lower Versions

  • <!--[if lt IE 7]>
  •     <link rel="stylesheet" type="text/css" href="css/ie6-and-lower.css">
  • <![endif]-->
  • <!--[if lte IE 6]>
  •     <link rel="stylesheet" type="text/css" href="css/ie6-and-lower.css">
  • <![endif]-->

Targeting IE6 and Higher Versions

  • <!--[if gt IE 5]>
  •     <link rel="stylesheet" type="text/css" href="css/ie6-and-higher.css">
  • <![endif]-->
  • <!--[if gte IE 6]>
  •     <link rel="stylesheet" type="text/css" href="css/ie6-and-higher.css">
  • <![endif]-->

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.