Using CSS hack technology to solve browser compatibility problems

What is CSS Hack?

Different browsers have different parsing results for CSS, which will result in different page effects for the same CSS output, which requires CSS hack to solve the browser-local compatibility problem. The process of writing different CSS code for different browsers is called CSS Hack.

CSS Hack Form

There are roughly 3 forms of CSS hack: css attribute hack, css selector hack, and IE conditional comment hack, hack mainly for IE browser.

1, attribute-level hack: such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but not the underscore "_", and Firefox two are not recognized. Wait a minute

2, selector level hack: such as IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}. Wait a minute

3, IE conditions Note hack: For example, for all ie:<!--[if ie]><!--your code--><! [Endif]-->, for IE6 and the following versions:<!--[if LT IE 7]><!--Your code--><! [Endif]--> This type of hack takes effect not only on CSS, but on all code written in the judgment statement.

　　Note The order of writing: Generally, the CSS of the browser with strong recognition ability is written in the back. Usually first write the FF and other non-IE browser required style, followed by writing IE8 required style, followed by IE7, then IE6.

Common CSS Hack

admin10000.com, set the font to red in color:red as an example:

/* CSS attribute level hack */color:red;     /* All browsers can recognize */_color:red;    /* only IE6 identification */*color:red;    /* IE6, IE7 identify */+color:red;    /* IE6, IE7 identify */*+color:red;    /* IE6, IE7 identify */[color:red;    /* IE6, IE7 identify */color:red\9;    /* IE6, IE7, IE8, IE9 identify */color:red\0;    /* IE8, IE9 identify */color:red\9\0;    /* only IE9 identification */color:red; /* only IE9 identification */color:red!important; /* IE6 do not recognize!important details see */-------------------------------------------------------------//CSS selector level hack */*html #demo   {color:red;}  /* Only IE6 identify */*+html #demo {color:red;} /* Only IE7 recognize */body:nth-of-type (1) #demo {color:red;}/* ie9+, ff3.5+, Chrome, Safari, Opera can identify */head:first-child+body #dem o {color:red;}/* ie7+, FF, Chrome, Safari, Opera can recognize */:root #demo {color:red\9;}:/* only IE9 recognition */------------------------ --------------------------------------/* IE condition comment hack details see */<!--[if ie]> here the content is only IE visible <! [endif]--> <!--[if IE 6]> this content is only IE6.0 visible <! [endif]--> <!--[if IE 7]> this content is only IE7.0 visible <! [endif]--> <!--[if GTE IE6]> IE6 and IE6 above are recognized <! [endif]--><!--[If Lt IE 7]> IE7 and IE7 The following versions are recognized <! [endif]--><!--[if GTE IE 7]> IE7 and IE7 versions are recognized <! [endif]--><!--[if! Ie]> Here the content is only non-ie visible <! [endif]-->

Note: Although CSS hack can solve the differences between the CSS display of the browser, but after all, do not conform to the specifications, we usually write CSS is best in accordance with the standard, so that the maintenance of our future is also a great advantage, really no longer use.

More famous CSS hack compatibility at a glance: http://centricle.com/ref/css/filters/
Related documents: The most complete CSS browser compatibility issue