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:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<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">
<![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".gtstands for "greater than".gtestands for "greater than or equal to".ltmeans "less than".ltemeans "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
Example
Try this code »<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie-only.css">
<![endif]-->Targeting All Browsers Except IE
Example
Try this code »<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="css/all-except-ie.css">
<![endif]-->Targeting Only IE9 Version
Example
Try this code »<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css">
<![endif]-->Targeting IE9 and Higher Versions
Example
Try this code »<!--[if gte IE 9]>
<link rel="stylesheet" href="css/ie9-and-higher.css">
<![endif]-->Similarly, you can define style sheet for other versions of Internet Explorer.
Related FAQ
Here are some more FAQ related to this topic:
