码迷,mamicode.com
首页 > 其他好文 > 详细

Hack方式解决浏览器兼容

时间:2018-05-02 21:10:02      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:元素   UI   The   world   cape   sea   google   display   代码   

一、浏览器内核简介

  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方式解决浏览器兼容

标签:元素   UI   The   world   cape   sea   google   display   代码   

原文地址:https://www.cnblogs.com/zhouwanqiu/p/8981854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!