常用浏览器兼容性

HTML识别

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

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

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

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

 

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

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

 

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

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

 

　　[5]IE9、IE10(\9\0)(color:blue\9\0;)

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

 

　　[3]IE8(@media \0)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
@media \0{
    .box{
        height: 100px;
        width: 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;
    width: 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;
    width: 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;
        width: 100px;
        background-color: red;
    }    
}

</style> 
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
复制代码

posted on 2015-09-20 15:26  城西费玉清  阅读(191)  评论(0)    收藏  举报

导航