CSS hacks

Browsers and standards. Eternal pursuit. Due to inconsistencies with standards, due to different ways of rendering pages, most of the time a web designer takes to smooth out these inconsistencies (use hacks). As a result, instead of effective work, the designer enters into unnatural relationships with browsers, losing precious time.

Cross-browser - the property of the site to display and work in all popular browsers is identical.

Hack - correcting an error or adding a new function by using another undocumented or incorrectly implemented feature. (c) Lurkmore

A dirty hack is a quick solution to a problem, mainly in the short term, which deprives the essence of the code of inner beauty and in disharmony with its internal structure. (c) Lurkmore
')

CSS hacks for Internet Explorer browser

ZOOM: 1:
Hack designed to determine hasLayout

* { zoom : 1 ; } 

PNG in IE6:
For IE6, the htc file iepngfix.htc is included, for the correct operation of background images of the PNG format for all elements, in the cssf-ie6.css file. Used IE PNG Fix v1.0 RC4 latest version.

 * { behavior : url ( "css/iepngfix.htc" ); } 

If bytes are important there is an example of 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 work only in IE under Windows, for other browsers they are normal comments, so you can use them without serious consequences. The syntax is:

 <!--[if ]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--> <!--[if !]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--> /*       -  ,   ! */ /*    : IE –    IE lt IE v – (less than)    IE,     v lte IE v – (less than or equal)    IE,     v,    gte IE v – (greater than or equal) –  IE,      v gt IE v – (greater than) –  IE,    v. */ 

Conditional comments in IE6, IE7, IE8:

 <!--[if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <![endif]--> /*    IE6 */ <!--[if IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <![endif]--> /*    IE7 */ <!--[if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <![endif]--> /*    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 fixed them.

 .class { padding : 4em ; border : 1em solid red ; width : 30em; width /**/ : /**/ 25em ; } /*  IE      padding + border */ 

Min-width and max-width in IE:
IE does not understand these css properties. The block hack looks like this:

 .class { min-width : 500px ; width : expression ( document.body.clientWidth < 500? "500px" : "auto" ); } /*  IE      padding + border */ 

 .class { min-width : 500px ; max-width : 750px ; width : expression ( document.body.clientWidth < 500? "500px" : document.body.clientWidth > 750? "750px" : "auto" ); } /*  IE      padding + border */ 

Min-height hack from Dustin Diaz

 .class { min-height : 100% ; height : auto !important ; height : 100% ; } 

Simple selectors:
It is not necessary to create a separate file for different browsers. You can use individual css selectors in the main css file:

 * html .class { } /*  ,   html-  ,     IE6 */ /*   quirks-mode,    IE6  IE7. */ *:first-child+html .class { } /*  IE 7   (first-child) */ *+html .class { } /*  IE 7 */ *:first-child+html .class { } /*  IE 7 */ html>body .class { } /*  IE 7    */ html>/**/body .class { } /*    ( IE 7) */ /* : .class { background:red } *html .class { background:green }     IE6     ,   IE6    -  */ 

Dirty hacks for IE6:

 .class { _background : #F00 ; } .class { -background : #F00 ; } .class { c\olor : #F00 ; } /*     a, b, c, d, e, f */ 

Dirty hacks for IE7:

 >body { background : #F00 ; } /*   body   IE7 */ html* { background : #F00 ; } /*      html.   IE7   */ -,.class { background : #F00 ; } .class { background : #F00 !important! ; } /*       !important.   IE7   */ 

Dirty hacks for IE8:

 .class { background : #F00\0/ ; } /*   body   IE7 */ 

Dirty hacks working in IE6 and IE7:

 .class { *background : #F00 ; } .class { //background : #F00 ; } .class { background : #F00 !ie ; } /*       !important */ 

CSS hacks for Mozila FireFox browser

Hacks for all versions of 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 above:

 html>/**/body .class, x:-moz-any-link, x:default { color : #F00 ; } 

CSS hacks for Google Chrome browser

 body:nth-of-type(1) .class { background : #000 ; } 

Opera Browser CSS Hacks

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, 8:

 @media all and ( min-width : 1px ) { .class { color : #F00 ; } } 

For Opera 9:

 @media all and ( width ) { .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 ; } } /*   Opera  Safari */