CSS fix for Chrome IE7 and IE8

In some cases we need to add browser specific css properties for the site, like separate css for IE 7 and IE8 to acheive the correct layout. To acheive that we can use different methods - 1. add custome CSS file for each browser and 2. Add custom properties in the main CSS

Here I am specifying how to add separeate css properies for Chrome, IE 7 & IE8 in the main CSS file.

Chrome

Google Chome is the fast growing web browser. Some times the site layout will break and need to alter css property for this particular browser.
To fix CSS issues for Chrome use body:nth-of-type(1) .elementOrClassName{property:value;}.
Eg: body:nth-of-type(1) .sitename{margin:20px;}
HTML
<div class="sitename"></div>

IE8

For IE8 use inline css hack "\0/".
.elementOrClassName{property:value;\0/}
Eg: .sitename{margin:20px;\0/}

IE7

* (star) can be used as the inline hack for ie7
.elementOrClassName{*property:value;}
Eg: .sitename{*margin:20px;}

IE6

_ (underscore) can be using for ie6
.elementOrClassName{_property:value;}
Eg: .sitename{_margin:20px;}

Posted in: CSS