IE only css

(1). Adding stylesheet just for IE:

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

(2). Adding body class just for IE:

   <!--[if lt IE 8]>
<body class="ie">
<![endif]-->

(3). Useful Syntax:

  • gt: greater than
  • gte: greater than or equal
  • lt: less than
  • lte: less than or equal

IE Common Issues

(1). IE 9 and the lower versions does not support multiple background, try use the following code:

   background: url('../img/box-earth.png') no-repeat bottom right, url('../img/box-pattern.jpg') !important;  
 background: url('../img/box-earth.png') no-repeat bottom right $blue-dark; /* for IE9 and below */  

(2). A div with transparent background is not able to trigger javascript hover function on IE.

The following css won't work on IE9 or lower:

   background: url('../img/box-earth.png') no-repeat bottom right, url('../img/box-pattern.jpg');  

How to fix: need to give the div a transparent background image with .gif or .png extension

   background: url('../img/spacer.gif') no-repeat;  
 background: url('../img/spacer.png') no-repeat;  

(3). IE 8 or lower doesn’t recognize background-position

Need to use 'background-position-x' and 'background-position-y' instead.

(4). Use custom image for cursor

Normally, the css will be:

   body {  
  cursor: url('../img/custom-cursor.png'), auto;  
 }  

However, IE only supports the image with ".cur" extension. I use "Greenfish Icon Editor" to convert my .png image to .cur.

   body {  
  cursor: url('../img/custom-cursor.cur'), auto;  
 }  

(5). There's another problem I found on IE, if we use hotspot for cursor, even you use .cur, it won't work on IE too, which means the following css won't work on IE8 or lower:

   body {  
  cursor: url('../img/custom-cursor.cur') 17 16, auto;  
 }  

To be continued...


1,477 0 0