IE9 和IE10 兼容性判断及效果

IE9及一下使用写法

IE10最好使用媒体查询的方式进行判断

<!DOCTYPE html>
<html>
<head>
<meta content=IE=edge,chrome=1 http-equiv=X-UA-Compatible  charset="utf-8"/>
<!--[if IE 8]> 仅IE8可识别 
      <style>
        .d1{
        100px;
        height:100px;
        background:yellow;
        }
       </style>
    <![endif]-->

<!--[if IE 9]> 仅IE9可识别 
      <style>
        .d1{
        100px;
        height:100px;
        background:blue;
        }
       </style>
    <![endif]-->

    <!-- 对IE10判断 IE10不再提供<！--[if IE 9]> 写法的判断 媒体查询@media--> 
    <style>
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS styles go here */
　　　　/*and后要有空格*/

        .d1{
        width:100px;
        height:100px;
        background:red;
        }
    }
    </style>

</head>
<body>
<div class="d1"></div>
</body>
</html>

IE10显示