IE浏览器下css的条件注释
IE浏览器下css的条件注释利用的是浏览器hack,适用范围是从IE5(包含)到IE9(包含),IE10及以上就不会识别这样的写法了。
其原理就是条件注释的基本结构和HTML的注释(<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。但是IE将会根据if条件来解析条件注释里的内容。
// 一个例子
// gt : greater than,选择条件版本以上版本,不包含条件版本
// lt : less than,选择条件版本以下版本,不包含条件版本
// gte : greater than or equal,选择条件版本以上版本,包含条件版本
// lte : less than or equal,选择条件版本以下版本,包含条件版本
<html>
<head>
<title>css条件注释</title>
<meta charset="UTF-8">
<style type="text/css">
.test{
margin: 20px auto;
width:200px;
height: 200px;
border: solid 1px black;
background-color: yellow;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.test{
margin: 20px auto;
width:200px;
height: 200px;
border: solid 1px black;
background-color: red;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
.test{
margin: 20px auto;
width:200px;
height: 200px;
border: solid 1px black;
background-color: blue;
}
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">
.test{
margin: 20px auto;
width:200px;
height: 200px;
border: solid 1px black;
background-color: green;
}
</style>
<![endif]-->
<!--[if gt IE 8]>
<style type="text/css">
.test{
margin: 20px auto;
width:200px;
height: 200px;
border: solid 1px black;
background-color: black;
}
</style>
<![endif]-->
</head>
<body>
<div class="test"></div>
<script type="text/javascript">
</script>
</body>
</html>