IE hacks in CSS/HTML

Posted on 13-02-2013 20:55 by graham
In this short tutorial we will show you how to add Internet Explorer hacks to your HTML code. IE hacks is a piece of HTML that will be displayed depending on the version of the client's Internet Explorer browser.

Display code only in Internet Explorer


To display code only if the client's browser is IE, use:
<!--[if IE]><!-->
This text will only be visible in Internet Explorer
<!--<![endif]-->
This text will be visible in all browsers, including IE.

Display code depending on the browser version


We can refine the above condition to make text visible only for certain version of the IE browser:
<!--[if IE 6]>
I can see you're using Internet Explorer 6... Get something newer, man!
<![endif]-->

We can use comparison operators gt (greater than), gt3 (greater or equal to), lt (lesser than) and lte (lesser or equal) in the conditions as well:
<!--[if gt IE 7]>
Text visible in versions higher than 7
<![endif]-->
<!--[if gte IE 7]>
Text visible in versions higher or equal to 7
<![endif]-->
<!--[if lt IE 9]>
Text visible in versions lower than 7
<![endif]-->
<!--[if lte IE 7]>
Text visible in versions lower or equal to 7
<![endif]-->

Display code when browser is not IE


And of course we display a text if the client's browser is other than Internet Explorer, which (as Web developers) we're all wishing for after all...
<!--[if !IE]> -->
As a developer, and as a human being, I thank you for not using Internet Explorer
<!-- <![endif]-->

Possible uses


This little feature allows us not only to display HTML elements visible or hidden for some users, but also to define CSS styles depending on the browser, which is a common need if you're forced to build HTML that works with all browsers.

IE-specific CSS


The conditional syntax described above allows you to include CSS stylesheets depending on the browser type and version.
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="non-ie-styles.css" />
<!--<![endif]-->
<!--[if IE]><!-->
<link rel="stylesheet" type="text/css" href="ie-styles.css" />
<!--<![endif]-->

or
<!--[if IE]><!-->
<style type="text/css">
...
</style>
<!--<![endif]-->
Comments

 

Add comment

Has this tutorial been helpful to you? Or do you see anything wrong? We appreciate your opinion!
Your comment:
Show formatting hints
HTML is disallowed, but in your text you can use the following markup
  • [code][/code] for a block of code
  • [tt][/tt] for inline code
  • [link]link href|link anchor[/link] for links
  • [b][/b] for bold text
Email:
+ Ask a question
If you have a technical question related to programming and computers, ask it here. Other users will help you solve it!
Unanswered questions
Share your knowledge by helping others solve their problems