Список CSS хаков для IE, FireFox, Opera, Safari

Ниже приведен список всевозможных хаков для браузеров IE6, IE7, IE8, FireFox, Opera, Safari

Список CSS хаков

 

/* хак только для  IE8 Only */
.myClass  { 
     color:red\0/; /* красный */
     padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */
}

/* IE 6 Only */
* html .myClass {
	...
} 

/* All except IE6 standards */
.myClass { 
	property /**/: value; 
} 

/* Firefox & IE 7, и выше */
html>body .myClass {
    ...
}

/* Modern browsers only (not IE 7) */
html>/**/body .myClass {
	...
}

/* IE 7 Only */
*:first-child+html .myClass {
   ...
}

/* Firefox Only */
@-moz-document url-prefix() {
	.myClass {
		...
	}
}

/* IE7 Only */
div[class^="myClass"] .myClass2 { 
	...
}

/* IE7 only */
*+html .myClass { 
	...
} 

/* hack for Opera <=9 */
html:first-child .myClass {
	...
} 

/* Firefox, Opera, Konqueror, Safari */
*|html .myClass { 
	...
}

/* IE8 beta 2 only (?)*/
html:first-child .myClass [attr|=a-b] { 
	...
} 

/* IE5/Mac only */
/*\*//*/ .myClass { property: value; } /**/ 

/* Gecko only */
.myClass:not([attr*=""]) { 
	...
} 

/* Opera < 9.5 only */
@media all and (min-width: 0px) { 
	html:first-child .myClass { 
		...
	} 
} 

/* Safari only */
.myClass:not(:root:root) { 
	...
} 

/* Safari 3.0 and Chrome only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass {
             ....
    }
}

CSS для Explorer

<!--[if IE]> 
	... если Internet Explorer ..
	<link href="ie-fix.css" type="text/css" rel="stylesheet"> 
<![endif]--> 

<!--[if IE 6.0]> 
	... если IE6 
<![endif]--> 
	
<!--[if IE 7]> 
	... если IE7
<![endif]--> 

<!--[if gte IE 5]> 
	... если IE5+
<![endif]--> 

<!--[if lt IE 6]> 
	.. если ниже IE 6
<![endif]--> 

<!--[if lte IE 5.5]> 
	... если ниже или равно IE 5.5 
<![endif]--> 

<!--[if gt IE 6]> 
	... если выше IE 6 
<![endif]-->

Полупрозрачность фона в IE, Firefox, Opera

.myClass {
	background-color:#000;	
	-moz-opacity:.82; /* Firefox */ 
	opacity:.82; /* Opera */
	filter:alpha(opacity=82); /* IE */
}

Убрать лишний padding в button в Firefox

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

 

test