Hack方式解决浏览器兼容

一、浏览器内核简介

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

    }

  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及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; }

猜你喜欢

转载自www.cnblogs.com/zhouwanqiu/p/8981854.html