Introduction of this for different browsers to write different CSS code process, called CSS hack!2 principle because different browsers support and parsing of CSS, but also due to the precedence of CSS in the relationship. We can write different CSS for different browsers according to this. There are roughly 3 forms of CSS Hack, CSS class internal Hack, selector Hack, and HTML header reference (if IE) Hack,css Hack are mainly targeted. Class internal hack: such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", and Firefox two do not know. Wait for the selector hack: for example, IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}. Wait Html[1] Header reference (if IE) Hack: 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. The writing order is usually written in front of the CSS of the browser with strong recognition ability. Here's how to write it in more detail. 3 practical applications such as to distinguish between IE6 and Firefox two browsers, you can write:?
| 1234 |
div{ background:green; /* for firefox */*background:red; /* for IE6 */(both IE6&& IE7) } |
I see in the IE6 is red, in Firefox see is green. Explain: The above CSS in Firefox, it is not aware of the back of the thing with the asterisk is what is, so it filtered out, ignored, the result is: Div{background:green}, so it is natural that the background of this div is green. In IE6, it can be identified by the two background, which results in the following: div{background:green;background:red;}, so according to the priority level, in the back of the red priority is high, So of course the background color of this div is red. CSS hack: Differentiate Ie6,ie7,firefox different browsers, CSS hack notation: The difference between IE6 and FF:?
| 1 |
background:orange;*background:blue; |
Difference between IE6 and IE7:?
| 1 |
background:green!important;background:blue; |
Difference between IE7 and FF:?
| 1 |
background:orange; *background:green; |
Difference ff,ie7,ie6:?
| 12 |
background:orange;*background:green;_background:blue; background:orange;*background:green!important;*background:blue; |
Note: IE can recognize *, standard browser (such as FF) does not recognize the *;IE6 can recognize *, can not recognize the!IMPORTANT;IE7 can identify *, to identify!important; FF does not recognize *, but can identify!important;
|
IE6 |
IE7 |
FireFox |
| * |
√ |
√ |
X |
| !important |
X |
√ |
√ |
Browser priority: Ff<ie7<ie6,css Hack The writing order is generally FF IE7 IE6
to: "#demo {width:100px;}" As an example;
#demo {width:100px;}/* is executed by FIREFOX,IE6,IE7. * /
* HTML #demo {width:120px;}/* will be executed by IE6, the previous definition will be overwritten later, so the width of #demo in IE6 is 120px;
*+html #demo {width:130px;}/* will be executed by IE7 * /
so Finally, #demo的宽度在三个浏览器的解释为: firefox:100px; ie6:120px; ie7:130px ;
IE8 latest CSS hack:
" \9" Example: "border:1px \9;". Here the "\9" can distinguish all IE and Firefox.
"IE8" recognition, IE6, IE7 can not."*" IE6, IE7 can be identified. IE8, Firefox cannot.
" _" IE6 can Identify "_", IE7, IE8, Firefox cannot.IE6 hack?
| 1 |
_background-color:#CDCDCD; /* ie 6*/ |
IE7 Hack*background-color: #dddd00; /* IE 7*/IE8 hackbackground-color:red; /* IE 8/9*/ie9 hackbackground-color:blue \9\0; firefox, tour, browser General background-color:red!important; Note the order of hack, Among them: Background-color:red\0;ie8 and IE9 all support; background-color:blue\9\0; IE9 support only; in addition, background-color:eeeeee\9; HACK supports IE6-IE8, but IE8 does not recognize CSS HACK for "*" and "_". The above rules can be combined flexibly applied. IE9 and IE8 and other versions of the difference description background-color:blue; All browsers know, here to Firefox, background-color:red\9;\9 all the IE browser can be recognized; background-color:yellow\0; It is left to IE8, the latest version of opera also know, behind its own hack wrote to opera, so, we think is to IE8 stay; +background-color:pink; + IE7 fixed; _background-color:orange; _ Dedicated to the magical ie6;:root #test {background-color:purple\9;}: Root is for IE9, the Internet has been circulated a version is: root #test {background-color:purple\0;}, This, the new version of opera also known, so the author repeatedly verified the final IE9: root selector {attribute \9;} @media all and (min-width:0px) {#test {background-color:black\0;}} This is the Magic Opera, which is always with IE, must add a, or firefox,chrome, Safari also knows ... @media screen and (-webkit-min-device-pixel-ratio:0) {#test {background-color:gray;}} Finally this is the browser upstart Chrome and Safari. Selector-level HACKCSS internal SelectorLevel hack syntax
{Srules} descriptionchoose a different browser and versionMinimize the use of CSS hack.hack are risky, use cautionThe default operating environment for all code and examples in this document is Standard mode, as is often not specifically stated. Some CSS hack because of the cross-understanding of the browser, it is necessary to use layer-by-layer overlay to achieve the hack of different browsers.simply list a few:* HTML. Test{color: #090;}/* for IE6 and earlier */* + HTML. Test{color: #ff0;}/* for IE7 */.test:lang (ZH-CN) {color: #f00;} /* for ie8+ and not IE */.test:nth-child (1) {color: #0ff;}/* for ie9+ and not IE */internal Properties Hackcss Internal attribute-level hack syntax: SELECTOR{<HAC K>?property:valueNote: [2]No matter what method, the order of writing is the Firefox written in front, IE7 written in the middle, IE6 written in the last side. Add: IE6 can recognize *, but can not recognize!important,ie7 can identify *, but also to identify!important; FF does not recognize *, but can recognize!important; underline "_", IE6 support underline, IE7 and Firefox do not support underline [2].
CSS HACK!CSS Hacker attack
