New CSS & IE6. IE7 & IE8 browser compatability fixes

Most browsers such as Firefox, Chrome and Internet Explorer 9+ support and render most css in a very similar way.

Depending on which statistics you view IE8 & IE7 still account for as much as 20% of internet users so if you ignore them your site could be displayed incorrectly for up to as many as 1 in 5 users. originally posted in 2013, as time goes by this number will go down.

Whilst the majority of users will be able to see modern CSS features such as opacity / transparent backgrounds, menus etc and other aesthetic affects like rounded corners and box  / text shadows these older browsers will not.

The easiest way to target these older browsers is as follows:

In your main websites index.html or index.php add the following lines:

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

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

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

Simply make sure that the path to ie6/7/8.css is correct and you can override your sites default css for just users of these older browsers.

Target via CSS Hack (The ugly way)
If it is just the odd piece of code you need to change you can target them directly in your CSS with the following code eg.
This is called the ugly way / hack as it is unknown what effect these lines will have when read by newer browsers in the future.

background: url(../images/picture.png); // All other browsers will use this line
background: none/9; //Hack for ie6,7 & 8

The /9 would tell browsers older than IE9 to render no background but all other browsers would display the background as an image.

Print Friendly, PDF & Email

More Like This


CSS Tips Web Design
  • Post a comment