zoukankan      html  css  js  c++  java
  • 常用浏览器兼容性

    HTML识别

    条件注释法(IE10以及以上版本不支持条件注释)

      【注意】两个--和左中括号[之间不能有空格,否则无效

      [1]IE9-(<!--[if IE]><![endif]-->)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <!--[if IE]>
    <div class="box" id="box"></div>
    <![endif]-->
    </body>
    </html>
    复制代码

      [2]仅单一IE(<!--[if IE 6]><![endif]-->)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <!--[if IE 7]>
    <div class="box" id="box"></div>
    <![endif]-->
    </body>
    </html>
    复制代码

      [3]大于 gt ||  大于等于 gte || 小于 lt || 小于等于 lte(<!--[if gte IE 8]><![endif]-->)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <!--[if gte IE 7]>
    <div class="box" id="box"></div>
    <![endif]-->
    </body>
    </html>        
    复制代码

      [4]非IE(IE10以及以上版本也能识别),此处多加的<-->,在IE中被当作内部注释,而在非IE浏览器中会闭合之前的注释(<!--[if !IE]><--><![endif]-->)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <!--[if !IE]><-->
    <div class="box" id="box"></div>
    <![endif]-->
    </body>
    </html>        
    复制代码

    CSS hack

    【1】属性前缀法(只有IE支持)

      [1]IE6(下划线、中划线)(_color:blue;-color:blue;)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        _background-color: red;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>            
    复制代码

      [2]IE7及以下版本(*号、+号)(*color:blue;+color:blue;)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        *background-color: red;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>            
    复制代码

      [3]IE10及以下版本(9)(color:blue9;)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        background-color: red9;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>            
    复制代码

      [4]IE8及以上版本()(color:blue;)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>            
    复制代码

      [5]IE9、IE10(9)(color:blue9;)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    .box{
        height: 100px;
         100px;
        background-color: red9;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>        
    复制代码

    【2】选择器前缀法

      [1]IE6(*html)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    *html .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>
    复制代码

      [2]IE7(*+html)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    *+html .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>    
    复制代码

      [3]IE8(@media )

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    @media {
        .box{
            height: 100px;
             100px;
            background-color: red;
        }
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>
    复制代码

      [4]IE9+及其他非IE浏览器(:root)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    :root .box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>        
    复制代码

      [5]firefox(x:-moz-any-link,)

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    x:-moz-any-link,.box{
        height: 100px;
         100px;
        background-color: red;
    }
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>    
    复制代码

      [6]chrome、safari、opera(@media screen and (-webkit-min-device-pixel-ratio:0))

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        .box{
            height: 100px;
             100px;
            background-color: red;
        }    
    }
    
    </style> 
    </head>
    <body>
    <div class="box" id="box"></div>
    </body>
    </html>
    复制代码
  • 相关阅读:
    学完自动化测试,用小技能做了点兼职刷弹幕,小赚10W
    学会这个,助你升值加薪自动化框架之python+selenium+pytest
    我都30岁了,现在做软件测试还来得及吗
    如何从小白成长为技术大牛,阿里测试总监为你梳理成神之路【全套资源分享】
    Google公布编程语言排名,第一竟然是他?
    程序员改行率竟然高达40%,看完我沉默了
    程序员一定要远离这个万恶之源
    自动化测试框架很难吗?我不觉得,不信你看
    三年经验的程序员,为什么能力要强过80%的人
    实验十 团队作业6:团队项目用户验收&Beta冲刺
  • 原文地址:https://www.cnblogs.com/wangjie-01/p/4823539.html
Copyright © 2011-2022 走看看