常用浏览器兼容性
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>
