浏览器兼容性

时间：2015-09-21 01:26:09 阅读：191 评论：0 收藏：0 [点我收藏+]

标签：

HTML识别

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

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

[1]IE9-()

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

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

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

浏览器兼容性

标签：

原文地址：http://www.cnblogs.com/lastorder/p/4824758.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行