Hack (browser-compatible CSS hack)

Source: Internet
Author: User
Tags html header

The principle of 1.hack

Because different browsers support the CSS and parse the result is not the same, but also due to the precedence of the 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 primarily for 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 are not recognized. Wait for the selector hack: for example, IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}. And so on HTML 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. 2.CSS hack mode

(1) mode one conditional annotation method

Effective only under IE <!--[if ie]> this text is only displayed in IE browser <! [endif]--> only takes effect under IE6 <!--[if IE 6]> this text is displayed only in IE6 browser <! [endif]--> only valid at IE6 or above <!--[if GTE ie 6]> this text only appears in IE6 above (including) version of IE browser <! [endif]--> is not effective on IE8 <!--[if! IE 8]> This text in non-IE8 browser display <! [endif]--> non-IE browser effective <!--[if! Ie]> This text is only displayed in non-IE browser <! [endif]--> (2) mode two intra-Class attribute prefix method Description: In standard mode
    • "The-″ minus is IE6 proprietary hack
    • "The \9″ie6/ie7/ie8/ie9/ie10 are in effect.
    • "The \0″ie8/ie9/ie10 are in force and are IE8/9/10 hack
    • "\9\0″ only for Ie9/ie10, is IE9/10 's hack

(3) CSS hack method Three: Selector prefix method

*html * prefix is only valid for IE6 *+html *+ prefix is only valid for IE7 @media screen\9{...} Valid for IE6/7 only @media \0screen {body {background:red;}} Valid only for IE8 @media \0screen\,screen\9{body {background:blue;}} Only valid for Ie6/7/8 @media screen\0 {body {background:green;}} is valid for IE8/9/10 only @media screen and (min-width:0\0) {body {background: Gray }} only valid for IE9/10 @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {body {background:orange;}} only for IE1 0 effective, etc.

Hack (browser-compatible CSS hack)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.