• 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:    

        /*Firefox 3+*/

        @-moz-document url-prefix() {

          .selector { property: value; }

        }

        /*Firefox 4+*/

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

          .selector { property:value; }

        }

      Webkit(Chrome、Safari):

        /*Chrome、Safari 3+*/

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

          .selector { property: value; }

        }

        /*Chrome 24 、Safari 5*/

        ::made-up-pseudo-element,.selector {

          .selector { property:value; }

        }

        /*iPhone、mobile webkit*/

        @media screen and (max-device-480px) {

          .selector { property:value; }

        }

      Opera:

        /*Opera、IE 8/9/10*/

        @media screen {

          .selector { property: value; }

        }

        /*Opera 12*/

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

          head~body .selector { property: value; }

        }

        /*Opera 9.5+*/

        noindex:-o-prefocus, .selector { property:value; }

      IE9:

        :root .selector { property: value9; }

      IE9及IE9以下版本:

        .selector { property:value9; }

      IE8:

        @media screen{

                  .selector { property:value; }

              }

      IE8及IE8以上版本:

        .selector { property: value; }

      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方式的三种写法:

      属性前缀法:

        IE都能识别星号“*”,标准浏览器(如Firefox)不能识别星号“*”

          .selector {

            color:red;

            *color:green;

          }

        IE6能识别下划线"_”和星号“*”,IE7能识别星号“*”但不能识别下划线"_";

          .selector {

            color:red;

            *color:green;

            _color:blue;

          }

        IE6能识别星号“*”,但不能识别“!important”,IE7能识别星号“*”,也能识别“!important”;

          .selector {

            color:red !important;

            color:green;

          }

        Firefox不能识别星号“*”、下划线“_”,但能识别“!important”;

          .selector {

            color:red;

            *color:green !important;

            *color:blue;

          }

      选择器前缀法:

        IE6能识别*html .class{}

          *html .selector {

            color:red;

          }

        IE7能识别*+html .class{}或者*:first-child+html .class{}

          *+html .selector {

            color:red;

          }

          *:first-child+html .selector {

            color:red;

          }

        IE8-9

          html>/**/body .selector {

            color:red;

          }

        IE9+

          :root .selector {

            color:red;

          }

      IE条件注释法:

        IE10+已经不再支持条件注释,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效;

          <!--[if IE]>

            这段文本只在IE浏览器显示

          <![endif]-->

          <!--[if gt IE 5.0]>

            这段文本只在IE5.0及以上IE5.X浏览器显示

          <![endif]-->

          <!--[if IE 6]>

            这段文本只在IE6浏览器显示

          <![endif]-->

          <!--[if gte IE 6]>

            这段文本只在IE6及以上版本浏览器显示

          <![endif]-->

          <!--[if ! IE]>

            这段文本只在非IE浏览器显示

          <![endif]-->

  • 相关阅读:
    什么是序列化
    命令执行漏洞
    sql注入总结
    npm包之merge-descriptors
    Koa路由中间件之koa-router
    TypeScript声明文件(.d.ts)的使用
    TypeScript使用的简单记录
    TypeScript的安装、使用及配置
    Node websocket简单封装
    使用docker-compose配置mysql服务
  • 原文地址:https://www.cnblogs.com/zhouwanqiu/p/8981854.html
Copyright © 2020-2023  润新知