Hack way to solve browser compatibility

1. Introduction to the Browser Kernel

  Trident kernel: IE, MaxThon, TT, The World, 360, Sogou browser, etc.

  Gecko kernel: Netscape6 and above, FF, MozillaSuite/SeaMonkey, etc.

  Presto kernel: Opera7 and above

  Webkit kernel: Safari, Chrome, etc.

Second, the solution to IE does not support HTML5 method:

  Method 1: Reference Google's html5.js file in the <head></head> section

    <!--[if lt IE 9]>

      <script src="/html5.js"></script>

    <![endif]-->

  Method 2: Make it a block-level element and add decoration in CSS

    / * html5 * /

    article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

  Method 3: JavaScript code

    document.createElement("elementName").style.display = "block";

3. The writing method of Hack under each browser:

  Firefox:    

    @-moz-document url-prefix() {

      .selector { property: value; }

    }

  Webkit(Chrome、Safari):

    @media screen and (-webkit-min-device-pixel-ratio:0)  {

      .selector { property: value; }

    }

  Opera:

    @media all and (min-width:0) {

      .selector { property: value; }

    }

  IE9:

    :root .selector { property: value\9; }

  IE9 and below IE9:

    .selector { property:value\9; }

  IE8

    @media \0screen{

              .selector { property:value; }

          }

  IE8 and above versions:

    .selector { property: value\0; }

  IE7:

    *+html .selector{ property:value; }

    或  *:first-child+html .selector { property:value; }

  IE7 and below IE7:

    .selector { *property: value; }

  IE6

    .selector { _property/**/:/**/value; }

    或  .selector { _property: value; }

    或  *html .selector { property: value; }

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325216933&siteId=291194637