CSS Hack Tips Daquan

Source: Internet
Author: User

--Wu Leijun

    • Compatibility range:
    • Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome
    • Resources:
    • List of common compatible tags for each tour:

    • Mark IE6 IE7 IE8 FF Opera Sarari
      [*+><] X X X X
      _ X X X X X
      \9 X X X
      / X X X X
      @media screen and (-webkit-min-device-pixel-ratio:0) {. bb {}} X X X X X
      . BB, X:-moz-any-link, X:default X X √ (ff3.5 and below) X X
      @-moz-document Url-prefix () {. bb{}} X X X X X
      @media all and (min-width:0px) {. bb {}} X X X
      * +html . bb {} X X X X X
      Browser Core Trident Trident Trident Gecko Presto Webkit
      (Above. BB can be changed to another style name)
    • Note the point:

    • Many information on the internet often put!important also as a means of hack, in fact, this is a misunderstanding.!important is often used by us to change the style, not to be compatible with hack. The cause of this misunderstanding is that IE6 in some cases do not actively identify!important, so often misused to identify IE6 hack. However, it is important to note that IE6 is not recognized in some cases (IE6, the same style attribute is defined in the same curly brace, where one plus important important tag is ignored, for example: {background:red! Important Background:green;} IE6 is interpreted as background color green, and other browsers are interpreted as background color red; If the same style is defined in different curly braces, one of the important will important play a normal role, for example: Div{background:red!important } Div{background:green}, when all browsers are interpreted uniformly as background color red. )

    • Example Explanation:
    • Hack application Scenario (i)

    • Scope of application: compatibility between ie:6.0,ie7.0,ie8.0

    • Example Description:

    • In this example, we use progressive recognition to gradually exclude parts from the population. First, the use of the "\9" Mark, the Internet Explorer is separated from all situations. Then, once again using "+" to separate IE8 and IE7, IE6, at this time, our IE8 has been independently identified.
    • Instance code:

    • . bb{
      height:32px;
      Background-color: #f1ee18; / * All recognition */
      . Background-color: #00deff \9; /*ie6, 7, 8 identification */
      +background-color: #a200ff; /*IE6, 7 identification */
      _background-color: #1e0bd1; /*ie6 Recognition */
      }

      /* A DIV tag for display class BB */

      < div class = "BB" ></ div >

    • Hack application situation (II.)

    • Scope of application: compatibility between Ie:6.0,ie7.0,ie8.0,firefox

    • Example Description:

    • It is easy to see that this is the enhanced version of scenario (i) and is applicable to a wider range of environments. In fact, the situation (a) has been done to distinguish Firefox and IE Explorer, now we have to do is to make Firefox from other browsers to recognize again. Look at the code carefully, you will find that the fact that the viewer recognition is very simple. How does Firefox identify? Yes, the pseudo-class support is not widespread in IE, so pseudo-class is a good way. (. Yourclass,x:-moz-any-link, X:default) Note that this distinction pseudo-class is often IE7 can also be recognized, so it is best to identify the IE7 alone, and this method is invalid for ff3.6, Firefox can be used to differentiate @-moz-document Url-prefix () {}
    • Instance code:

    • . bb{
      height:32px;
      Background-color: #f1ee18; / * All recognition */
      Background-color: #00deff \9; /*ie6, 7, 8 identification */
      +background-color: #a200ff; /*IE6, 7 identification */
      _background-color: #1e0bd1; /*ie6 Recognition */
      }
      . BB, X:-moz-any-link, X:default{background-color: #00ff00;} /*ie7 firefox3.5 and below identification */
      @-moz-document Url-prefix () {. Bb{background-color: #00ff00;}} / * Only Firefox identification */
      * +html. Bb{background-color: #a200ff;} / * Only IE7 recognition * /


      /* A DIV tag for display class BB */

      < div class = "BB" ></ div >

    • Hack application Scenario (iii)

    • Scope of application: Compatibility between Ie:6.0,ie7.0,ie8.0,firefox,safari (Chrome)

    • Example Description:

    • We will now again strengthen our CSS so that it can recognize the Safari (Chrome) browser. This is recognized based on their kernel WebKit, using @media screen and (-webkit-min-device-pixel-ratio:0)
    • Instance code:

    • . bb{
      height:32px;
      Background-color: #f1ee18; / * All recognition */
      Background-color: #00deff \9; /*ie6, 7, 8 identification */
      +background-color: #a200ff; /*IE6, 7 identification */
      _background-color: #1e0bd1; /*ie6 Recognition */
      }
      @media screen and (-webkit-min-device-pixel-ratio:0) {. Bb{background-color: #f1ee18}}{} /*safari (Chrome) valid */
      . BB, X:-moz-any-link, X:default{background-color: #00ff00;} /*ie7 firefox3.5 and below identification */
      @-moz-document Url-prefix () {. Bb{background-color: #00ff00;}} / * Only Firefox identification */
      * +html. Bb{background-color: #a200ff;} / * Only IE7 recognition * /


      /* A DIV tag for display class BB */

      < div class = "BB" ></ div >

    • Hack application Scenario (iv)

    • Scope of application: Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome fully compatible

    • Example Description:

    • The specific code for the instance is listed in the following instance code, which results in the top part of the page, and you can detect the effect from different viewers. This time we basically have all the mainstream of the tour device is compatible, we look at the code. Opera's recognition is partly attributed to the "IE8" Mark, which is only recognized by the two, and the special markings often create our broader hack approach. The following example of the code is more complete, you can choose to reference.
    • Instance code:

    • <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

      <html xmlns= "http://www.w3.org/1999/xhtml" lang= "gb2312" >
    • <head>
    • <Meta http-equiv=content-type Content= "text/html; charset=gb2312"/>
    • <style type= "Text/css" >
    • /***************************************** each browser compatible with CSS **********************************************/
      . Bb{height:32px;background-color: #f1ee18;/* All recognition */background-color: #00deff \9;/*IE6, 7, 8 identification */+background-color: #a200ff;/*IE6, 7 recognition */_background-color: #1e0bd1/*IE6 Recognition */}

      @media screen and (-webkit-min-device-pixel-ratio:0) {. Bb{background-color: #f1ee18}}{}/* Valid for Safari (Chrome) */
      @media all and (min-width:0px) {. Bb{background-color: #f1ee18;/*opera and Safari (Chrome) and firefox*/background-color: #4cac70;}/* Only valid for Opera *}}

      . BB, X:-moz-any-link, X:default{background-color: #4eff00;/*ie7, Firefox3.5 and below identification */}
      @-moz-document Url-prefix () {. Bb{background-color: #4eff00;/* Only Firefox recognition */}}
      * +html. Bb{background-color: #a200ff;}/* Only IE7 recognition */

      /* In general, we distinguish IE7 only with +background-color with _background-color on the line if you have to write. BB, X:-moz-any-link, X:default This code distinguishes between Firefox3.5 and the following Keep in mind that this is also valid for IE7, so rewrite the +background-color again or use the * +html. Bb{background-color:blue;} method is only valid for IE7. can be used@-moz-document Url-prefix () {} method distinguishes all firefox*/independently

      . browsers td{width:8%;text-align:center;padding:8px;}}
      . Browsercolor{color: #333; font-size:18px;font-weight:bold;}
      . Ie6{background-color: #1e0bd1}
      . Ie7{background-color: #a200ff}
      . Ie8{background-color: #00deff}
      . Firefox{background-color: #4eff00}
      . Opera{background-color: #4cac70}
      . Other{background-color: #f1ee18;}

      #tipTable TD, #tipTable th{border:1px solid black;width:56px;height:16px;text-align:center;}
      #wordTable td{margin-left:8px;}
      #firefoxTip {display:none;}
      #firefoxTip, X:-moz-any-link, X:default{display:block;/*ie7 firefox3.5 and the following identify */+display:none/* to differentiate once ie7*/}
      @-moz-document Url-prefix () {#firefoxTip {display:block; /* Only Firefox recognition */}}
      #ChromeTip {display:none;}
      @media screen and (-webkit-min-device-pixel-ratio:0) {#ChromeTip {display:block;}} {} //Safari (Chrome) valid */
      @media all and (min-width:0px) {#ChromeTip {display:none\0;} / * Valid only for Opera */} {}

    • </style>
    • </head>
    • <body>
    • <table class= "Browsers" width= "100%" cellspacing= "0" cellpadding= " 0 ">
    • <tr>
    • <TD>ie6</TD>
    • <TD></TD>
    • <TD>ie7</TD>
    • <TD></TD>
    • <TD>ie8</TD>
    • <TD></TD>
    • <TD>firefox</TD>
    • <TD></TD>
    • <TD>opera</TD>
    • <TD></TD>
    • <TD>safari (CHROME) </td>
    • <TD></TD>
    • </tr>
    • <tr class= "Browsercolor" >
    • <td Class= "IE6" >ie6</td>
    • <TD></TD>
    • <td Class= "IE7" >ie7</TD>
    • <TD></TD>
    • <td Class= "IE8" >ie8</td>
    • <TD></TD>
    • <td Class= "Firefox" >firefox</td>
    • <TD></TD>
    • <td Class= "Opera" >opera</td>
    • <TD></TD>
    • <td Class= "Other" >safari (Chrome) </td>
    • <TD></TD>
    • </tr>
    • </table>
    • <div class= "BB" >
    • <span style= "display:none;display:block\0;display:none\9;" >opera color is dark green, opera tour is very fashionable. </span >
    • <span id= "firefoxtip" >firefox color is light green, Firefox is a very powerful browser. </span >
    • <span id= "chrometip" >safari and chrome are golden yellow, Safari and chrome use WebKit kernel </span >
    • <!--[if IE 8]>ie8 color is blue, the new version IE8 is a lot of features. <! [endif]-->

    • <!--[if IE 7]>ie7 color is purple, IE7 can be used! <! [endif]-->

    • <!--[if IE 6]>ie6 color is red, however, IE6 is a bit behind! <! [endif]-->

    • </div>
    • </body>
    • </html>

CSS Hack Tips Daquan

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.