Sometimes you need to detect browser version in CSS in order to apply additional, browser specific, properties to the same class.
Here are the ways for selecting specific versions of Internet Explorer by using followind conditional comments:
-
IE 6 and below
- Use * html {} to select the html element.
-
IE 7 and below
- Use *:first-child+html {} * html {} to select the html element.
-
IE 7 only
- Use *:first-child+html {} to select the html element.
-
IE 7 and modern browsers only
- Use html>body {} to select the body element.
-
Modern browsers only (not IE 7)
- Use html>/**/body {} to select the body element.
Example for IE7 only (change left padding to 5px instead of 20px as it is for other browsers)
.your_css_class
{
color: #000;
padding: 20px;
background: #fff;
}
/* IE7 hack */
*:first-child+html .your_css_class
{
padding-left: 5px;
}
