1. 程式人生 > >Hack方式解決瀏覽器兼容

Hack方式解決瀏覽器兼容

-- prefix dialog oot ati endif wid ide PE

一、瀏覽器內核簡介

  Trident內核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等

  Gecko內核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等

  Presto內核:Opera7及以上

  Webkit內核:Safari,Chrome等

二、解決IE不支持HTML5的方法:

  方法一:在<head></head>部分引用Google的 html5.js 文件

    <!--[if lt IE 9]>

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

    <![endif]-->

  方法二:使之成為塊級元素,在CSS中加上修飾

    /*html5*/

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

  方法三:JavaScript代碼

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

三、各瀏覽器下Hack方式的寫法:

  Firefox:    

    @-moz-document url-prefix() {

      .selector { property: value; }

    }

    支持Firefox的其他寫法:

      #selector[id=selector] { property: value; } /*支持所有Firefox版本*/

      *>.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; }

    }

    或:

    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

      head~body .selector { property: value; }

    }

    或:

    html:first-child>body .selector { property:value; }

  IE9:

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

  IE9及IE9以下版本:

    .selector { property:value\9; }

  IE8:

    @media \0screen{

  .selector { property:value; }

 }

  IE8及IE8以上版本:

    .selector { property: value\0; }

  IE7:

    *+html .selector{ property:value; }

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

  IE7及IE7以下版本:

    .selector { *property: value; }

  IE6:

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

    或 .selector { _property: value; }

    或 *html .selector { property: value; }

Hack方式解決瀏覽器兼容