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>
    复制代码
  • 相关阅读:
    mysql leetcode 1445. 苹果和桔子 分组求差值
    前后端分离的理解
    mysql leetcode 178. 分数排名 自定义排名序号列 1,2,3
    mysql 距离今日,过去一年/一个月/一天 表达式
    mysql leetcode 1280. 学生们参加各科测试的次数 解题思路 一步一步来
    mysql leetcode 1435. 制作会话柱状图 解题思路 一步一步来
    leetcode 刷题笔记 寻找数组的中心索引 二分法查找
    mysql case when 理解和应用
    三角函数
    冒泡排序,选择排序,插入排序
  • 原文地址:https://www.cnblogs.com/wangjie-01/p/4823539.html
Copyright © 2011-2022 走看看