CSS hacks For IE, Mozilla, Chrome, Safari, Opera browsers

 @media all and ... hack for IE

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}

Text will be red in Opera7+, Firefox 3.5+, Chrome4+, IE9. Green in other browsers (also in Internet Explorer 8 but not in Internet Explorer 9).
This is old hack but few years ago it was used only for Opera 7+. Now it is used to filter IE.

.test{color:green;}
@media all and (min-width: 0px){
  .test{color:red;}
}


underscore hack

Will work only in IE5.5, IE6:

Text will be red in Internet Explorer 5.5 and Internet Explorer 6, blue in other browsers.

.example{
  color: blue;
  _color: red;
}

html>body hack for IE6

IE6 doesn't support child selectors (">"), so text will be red in IE6 and green in other browsers.

p{color: red;}
div#mydiv{color: red;}
html>body p {background-color: green;}
html>body div#myDiv{background-color: green;}

backslash in property hack for IE5.x

Those style wouldn't work in IE 5.x (Attention: those will work if backslash is first sign, eg: \width: 300px; will work):

.example{
  back\ground: red;
}
.example{
  font\t: bold 15px arial;
}
.example{
  bord\er: 1px solid red;
}

* html hack for IE6

Text will be red in Internet Explorer 6, green in other browsers.

IE6 thinks that html element has parent. For other browsers html is root element so * html is invalid.

p{color: green;}
* html p{color: red;}


Asterisk hack

In IE5, IE6, IE7(!) text will be blue, green in other browsers.

body{
  color: green;
  * color: blue;
}

Comments mess for IE5-Mac

Text will be green in Internet Explorer 5 for Mac. Red in other browsers.

p{color: green;}
/*hack for ie5\*/
p{color: red;}
/* end */

value comment hack for IE5

In IE5.x/WIN (don't know if works for Mac) text will be red, blue in other browsers:

.menu{
  width: red;
  width: /**/blue;
}

!important or not hack for IE7

In Internet Explorer 7 and below text will be green and red in other browsers.

.h19a{color:red; color: green !important!;}

 .h19b{color:red; color:green !inIE;}

\{space} hack

Text red underlined in IE < 8 and green, bold, without underline in other browsers.
\0 works with background in IE9 but it also works in Opera (10.5) so it unsafe. \0 not works in ie6.

div {color:green; font-weight:bold;}
div\ {color:red; text-decoration:underline;}
p{
    color:blue;
    color: pink\9;
    text-decoration:underline\a;
    font-weight:bold\b;
    background:yellow\d;
    border:1px solid\0; /*This works in IE7, IE8, IE9, Opera 10.63).*/
}

*+html hack working only in IE7

This is variant of * html hack for IE6 but this one works only in IE7.

Text will be green in IE7 and blue in other browsers.

.test { color: blue; }

*+html .test { color: green; }

hack to target IE7 and below

This is modification of hack 5. Ie 7 supports child selectors but not when there is an empty comment after it.

Text will be blue in IE7 and below and green in other browsers.

.test { color: blue; }
html >/**/body .test { color: green; }

Double ID hack for IE8

Text red only in Internet Explorer 8, green in other browsers (also in IE7 or IE9).

p{color:red;}
p,#ie8#bug{color:green;}



 hack to target IE8 and IE9 only

Text will be green in Internet Explorer 8 and 9. Red in other browsers. It will not work for background or font-*.

.test{color:red;}
.test{color:green \ ;}


hack to target IE9 only

Text will be green in Internet Explorer 9. Red in other browsers. It will not work for background or font-*.

.test{color:red;}
:root .test{color:green \ ;}

IE9 hack

On the web you can find hack for Internet Explorer 9 :root .test {color: green\0;}. But be careful. This declaration will work not only in IE9 but also in Opera (tested in 10.63).

You can replace \0 with other chars (see hack 17) but then it will not work for background.

Text green in Internet Explorer 9 and Opera.

.test{color:red;}
:root .test {color: green\0;}

\9 hack

Text green in Internet Explorer 7 and above, red in other browsers. Remove comment to make text green also in IE6.

p{color:red; color /*\**/: green\9;}

IE 10  hack

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

moz-any() for Firefox 4-6


in firefox 4 you can use :-moz-any() grouping selector. Inside :-moz-any() you can use simple selectors. :any() grouping element cannot contains combinators.

In firefox 4 text will be green. Red in other browsers.

p.test{color:red;}
:-moz-any(p.test}{color:green;}


@-moz-document hack for firefox

Text will be green in firefox>1.5 and red in other browsers.

.h21{color:red;}
@-moz-document url-prefix(){
  .h21{color:green;}
}

@-moz-document url-prefix() {
  .selector {
     color:lime;
  }
}

-webkit-min-device- hack for Chrome and Safari

Hack for Google Chrome. In Google Chrome text will be green and red in other browsers.

#item .element{color:green;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #item .element{color:red;}
}

Bracket-property hacks
Hacks for goole Chrome and one for Opera. Text will be red in Google Chrome, green in other browsers.

/* will be red only in opera<10 and google chrome */
#test2{
    color:green;
    -bracket-:hack(;
        color:red;
    );
}
/* will be red only in google chrome */
#test3{
    color:green;
    (-bracket-:hack;
        color:red;
    );
}
/* will be red only in google chrome */
#test4{
    color:green;
    -bracket-:hack[;
        color:red;
    ];
}
 hack for Only Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){
body:nth-of-type(1) .classname{ padding-left:0;}
}

hover , focus problem in safari and chrome

/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */

/*html { -webkit-animation: safariSelectorFix infinite 1s }

@-webkit-keyframes safariSelectorFix { 0% {

zoom:1;

}

100% {

zoom:1;

}

}*/

Multihack

Multihack sets red color for ie, blue for gecko (Firefox), pink for Opera > 8.5:

/*ie*/
#example{
  color: red;
}
/*firefox(gecko)*/
body:not([foobar]) #example{
  color: blue;
}
/*opera > v8.5*/
@media all and (min-height:0px;){
  body #example{
  color: pink;
  }
}


for older browsers and Operas < 8

Will not work in older browsers (Netscape 4) and Opera below version 8.

body{
  background-color: green;
  voice-family: "\"}\"";
  voice-family: inherit;
  background-color: red;

}