Browsers and standards are in the eternal race. Because there is mismatching in the standards due to different ways of rendering pages, a lot of time of a web designer goes to make up these mismatching (using hacks). As a result, the designer deals with the browsers instead of effective work, losing precious time of work.

A cross-browser is a feature of website that displays and works in all popular browsers identically.

Hack is a correction of a bug or addition of a new feature through the use of other undocumented or incorrectly realized feature. (c) Lurkmore

Dirty hack is a quick solution to any problem in the short term, which negatively affects a code of inner beauty and clashes with its internal structure. (c) Lurkmore

CSS-hacks for the Internet Explorer browser

ZOOM:1 :
Hack that is designed to identify hasLayout
* { Zoom : 1 ; }
PNG in IE6 :
For IE6 connects htc-file iepngfix.htc, for the proper operation of background images PNG for all elements in the file cssf-ie6.css. It is used IE PNG Fix v1.0 RC4 of the latest version.
* { Behavior : url ( "css /iepngfix.htc"); }<mumblecut />

If bytes are important, for example: using a filter for IE:
.class {
background : none ;
filter : progid : DXImageTransform.Microsoft.AlphaImageLoader (
src = '/images/png-image.png',
sizingMethod = 'scale'
);
}
Separation of styles from IE6 :
html> body .class { }
head+body .class { }
html:first-child .class { }
Separation of styles from IE6 and IE7 :
html >/**/body { }
Separation of styles from IE6 - IE8 :
* |html .class { }
html:not([lang*=""]) . class { }
Conditional comments in IE :
Conditional comments only work in IE on Windows; they are the usual comments for other browsers, so they can be used. Syntax is:
<! [If condition]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <! [Endif]>
<! [If! Condition]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* If you want to ignore using the explorer some piece of code, you can use !condition */
/* condition can be:
IE - for any version of IE
lt IE v - (less than) for all browsers IE, which version is less than v
lte IE v - (less than or equal) for all browsers IE, which version is less than v, or the same
gte IE v - (greater than or equal) - for IE, which version is greater than or equal to v
gt IE v - (greater than) - for IE, which version is greater than v. */
Conditional comments in IE6, IE7, IE8 :
<! [if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* Stylesheet for IE6 */
<! [If IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* Style sheet for IE7 */
<! [if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* Stylesheet for IE8 */
Box Model hack:
In IE, there are glitches, when the border and padding are included in the width of the element. Box Model hack fixes it.
.class {
padding : 4em;
border : 1em solid red;
width : 30em;
width /**/: /**/ 25em;
}
/* For IE width of the block is less than the value of padding + border */
Min-width and max-width are in IE :
IE does not read these properties css. Hack for block looks like this:
.class {
min-width : 500px;
width : expression (
document.body.clientWidth <500? "500px" : "auto"
);
}
/* For IE width of the block is less than the value of padding + border */

.class {
min-width : 500px;
max-width : 750px;
width : expression (
document.body.clientWidth < 500? "500px" :
document.body.clientWidth> 750? "750px" : "auto"
);
}
/* For IE width of the block is less than the value of padding + border */
Min-height of fast hack is from Dustin Diaz
.class {
min-height : 100%;
height : auto! Important ;
height : 100% ;
}
Simple selectors:
It is not necessarily to create a separate file for different browsers. You can use individual css-selectors in css-file:
* html .class { } /* In the case that html-page has a doctype, this hack works in IE6 */
/* In the case of quirks-mode, hack works in IE6 and IE7. */
*:First-child+html .class { } /* for IE 7 and lower (first-child) */
*+html .class { } /* for IE 7 */
*:first-child+html .class { } /* for IE 7 */
html> body .class { } /* for IE 7, and normal browsers */
html >/**/ body .class { } /* for normal browsers (except IE 7) */
/* Example:
.class { background:red }
*html .class { background:green }
It is in all browsers except IE6 and lower, a background will be red, but in IE6 and lower, in browsers will be green */
Dirty hacks for IE6 :
.class {_background : #F00 ; }
.class {-background : #F00 ; }
.class {c \ olor : #F00 ; } /* it does not work before the letters a, b, c, d, e, f */
Dirty hacks for IE7 :
body { background : #F00 ; }
/* selects the body element only in IE7 */
html* { background : #F00 ; }
/* extract all elements inside html only for IE7 and lower */
-,.class { background : #F00 ; }
.class { background : #F00 !important! ; }
/* Hack works using analogy with the property !important. It works for IE7 and lower */

Dirty hacks for IE8 :
.class { background : #F00\0/ ; }
/* selects the body element only in IE7 */
Dirty hacks that work in IE6 and IE7 :
.class { * background : #F00 ; }
.class {/ /background : #F00 ; }
.class { background : #F00 !ie ; }
/* Hack works using analogy with the property !important*/

CSS hacks for Mozila FireFox browser

Hacks for all versions of the MFF :
#class [id=class] { color : #F00 ; }
@-moz-document url-prefix () { .class {color : #F00 ; } }
*>.class {color : #F00 ; }
For MFF 1.5 and higher :
.class, x:-moz-any-link, x:only-child { color : #F00 ; }
For MFF 2.0 and higher :
body:empty .class { color : #F00 ; }
#class[id = CLASS] { color : #F00 ; }
html >/**/ body .class, x:-moz-any-link { color : #F00 ; }
For MFF 3.0 and possibly higher :
html >/**/ body. class, x:-moz-any-link, x:default { color : #F00 ; }

CSS hacks for the Google Chrome browser

@media all and (-webkit-min-device-pixel-ratio:0) {
/*styles for google chrome*/
}

CSS hacks for Opera browser

Hacks for all versions of Opera :
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio : 0 ) {
. Style {background: # F00;}
}

@media all and ( min-width : 0px ) {
.class {
Color : #F00 ;
}
}
For Opera 6 :
@media all and ( min-width : 1px) { { }
.class {
Color : #F00 ;
}
}
For Opera 7 and 8 :
@media all and ( min-width : 1px) {
.class {
Color : #F00 ;
}
}
For Opera 9 :
@media all and ( widt h) {
.class {
color : #F00 ;
}
}

@media all and ( min-width : 0px ) {
head ~ body .class {
color : #F00 ;
}
}

CSS hacks for Safari browser

body:first-of-type .class {color: # F00;}
html:root*.class { color : #F00 ; }
body:first-of-type .class { color : #F00 ; }
body:first-of-type .class { color : F00 ; }

@media screen and (-webkit-min-device-pixel-ratio : 0) {
.class {
Color : #F00 ;
}
}
/* Hack for Opera and Safari */