浏览器兼容性

HTML识别

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

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

[1]IE9-()

<!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()

<!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()

<!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浏览器中会闭合之前的注释(<![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>