CSS hack: different browsers have different CSS resolutions, which may lead to different page effects. At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers.
CSS Hack has three forms: CSS class internal Hack, selector Hack, and HTML header reference (if IE) Hack.
Internal Hack: for example, IE6 can recognize underscores (_) and star numbers (*). IE7 can recognize asterisks (*) but cannot recognize underscores "_", firefox does not know either of them. Etc. selector Hack: for example, IE6 can recognize * html. class {}, IE7 can recognize * + html. class {}, or *: first-child + html. class {}. And so on. HTML header reference (if IE) Hack: For all IE: For IE6 and earlier versions: This type of Hack not only takes effect for CSS, but also for all code written in the judgment statement. The writing order is generally to write the CSS of the browser with strong recognition ability in front.
Application:
For example, to distinguish IE6 from firefox, you can write as follows:
| 1234 |
div{background:green;/* for firefox */*background:red;/* for IE6 */ (bothIE6&& IE7)} |
I saw red in IE6 and green in firefox. Explanation: In firefox, the above css does not know what the asterisk is. Therefore, it is filtered out and ignored. The parsed result is: div {background: green}, so the background of this div is green. In IE6, both background can be identified. The parsed result is: div {background: green; background: red;}, so according to the priority level, the red at the end has a high priority, so of course the background color of this div is red. CSS hack: distinguishes IE6, IE7, and firefox from different browsers. CSS hack Syntax: differentiate 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 browsers (such as FF) cannot recognize *; IE6 can recognize *; cannot recognize! Important; IE7 can recognize * and can recognize! Important; FF cannot recognize *, but can recognize it! Important;
| |
IE6 |
IE7 |
FireFox |
| * |
√ |
√ |
× |
| ! Important |
× |
√ |
√ |
Browser priority: FF Take: "# demo {width: 100px;}" as an example;
# Demo {width: 100px;}/* executed by FIREFOX, IE6, and IE7 .*/
* Html # demo {width: 120px;}/* will be executed by IE6, and the previous definition will be overwritten later. Therefore, # The demo width in IE6 is 120px ;*/
* + Html # demo {width: 130px;}/* will be executed by IE7 */
So finally, # The demo width is interpreted in three browsers as: FIREFOX: 100px; ie6: 120px; ie7: 130px;
IE8 latest css hack:
"\ 9" Example: "border: 1px \ 9;". Here "\ 9" can distinguish all IE and FireFox.
"\ 0" IE8 identification, IE6, IE7 cannot."*" IE6 and IE7 can be identified. IE8 and FireFox cannot.
"_" IE6 can recognize "_". IE7, IE8, and FireFox cannot.IE6 hack
| 1 |
_background-color:#CDCDCD;/* ie 6*/ |
* Background-color: # dddd00;/* ie 7 */IE8 hackbackground-color: red \ 0;/* ie 8/9 */IE9 hackbackground-color: blue \ 9 \ 0; firefox, aoyou, General browser background-color: red! Important; pay attention to the hack writing sequence, in which: background-color: red \ 0; both IE8 and IE9 are supported; background-color: blue \ 9 \ 0; only IE9 supports; in addition, background-color: eeeeee \ 9; HACK supports IE6-IE8, but IE8 does not recognize css hack for '*' and. Flexible application based on the above rules. The difference between IE9 and IE8 and other versions indicates that background-color: blue is recognized by all browsers. It is used for firefox here; background-color: red \ 9; \ 9 all IE browsers are recognizable; background-color: yellow \ 0; \ 0 is reserved for ie8, and the latest version of opera is also known, and the latter has its own hack written to opera for recognition. Therefore, \ 0 we think it is for ie8; + background-color: pink; + ie7; _ background-color: orange; _ dedicated to the magic ie6 ;: root # test {background-color: purple \ 9;}: root is for ie9, and a version is available on the Internet: root # test {background-color: purple \ 0 ;}, this new version of opera is also known, so the author repeatedly verified that the ultimate unique feature of ie9 is: r Oot selector {property \ 9 ;}@ media all and (min-width: 0px) {# test {background-color: black \ 0 ;}} this is the magic opera that is always competing with ie to recognize \ 0. You must add \ 0. Otherwise, firefox, chrome, and safari will all know about it... @ Media screen and (-webkit-min-device-pixel-ratio: 0) {# test {background-color: gray ;}} Finally, this is the latest chrome and safari browser. Select character-level HackCSS internal selection of character-level Hack syntax
Selector {SRules} description
Select different browsers and versionsMinimize the use of CSS Hack.
Hack is risky and must be used with cautionUnless otherwise specified, the default runtime environment of all codes and examples in this document is standard. Some CSS Hack browsers have cross-recognition, so it is necessary to implement Hack for different browsers through layer-by-layer coverage.
A few simple examples:* 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 property HackCSS internal property-level Hack Syntax: selector { ? Property: value ?;} Value: _: IE6 or lower. A hyphen (-) can also be used. To avoid confusion with certain properties of a hyphen, it is more appropriate to use an underscore. *: Select IE7 or lower. Such as (+) and (#) can be used, but the industry has a higher awareness. \ 9: Select IE6 +. \ 0: Select IE8 + and Opera. [; Property: value;]; select the webkit core browser (Chrome, Safari ). IE7 and below can also be identified. The three semicolons inside and outside the brackets must be retained. The first semicolon can be any rule or any number of rules. [; Color: # f00;]; and [color: # f00; color: # f00;]; and [margin: 0; padding: 0; color: # f00;]; is equivalent. The last rule in brackets always takes effect, so the first method is usually the most concise. Note: Some CSS Hack browsers have cross-recognition, so it is necessary to implement Hack for different browsers through layer-by-layer coverage. For example, if you want to display the same text in IE6, 7, 8, chrome, and safari in different colors, write as follows :. test {color: #000;/* general support for normal writing */color: # 00F \ 9;/* all IE browsers (ie6 +) * // * supported, but IE8 cannot recognize "*" and "_" */[color: #000; color: #0F0;/* SF, CH supports */color: # 00F \ 0;/* IE8 support */* color: # FF0;/* IE7 support */_ color: # F00;/* IE6 support */}
Note:No matter what method, the order of writing is firefox before writing, IE7 in the middle, IE6 at the end. Supplement: IE6 can recognize *, but cannot recognize it! Important and IE7 can recognize * and also! Important; FF cannot recognize *, but can recognize it! Important; Underline "_", IE6 supports underline, IE7 and firefox do not support underline.
