兼容

1、opacity属性在IE8及以下的浏览器不支持，可用以下方式代替

filter: alpha(opacity=50); 设置为半透明
取值范围：0~100,0代表完全透明，100代表完成不透明

2、IE6中对png24图片的问题

如果使用了图片为png24的格式，那么会导致透明效果无法正常显示
解决方法:
1、可以将png24的格式转换为png8的格式，但是图片的清晰度会有所下降
2、（推荐）第一种方法的解决办法并不完美，第二种的办法好。
第一步:引入一个js文件（DD_belatedPNG_0.0.8a.js）
第二步:书写一行重要的js代码：

<!-- 引入js文件 -->
    <script src="js/DD_belatedPNG_0.0.8a.js"></script>
    <!-- 书写重要js代码 -->
    <script>
        DD_belatedPNG.fix("div,img");
    </script>

image.png

3、IE6的双倍边距问题

在IE6中，当为一个元素向右浮动并设置右外边距或者向左浮动的元素设置左外边距时，这个外边距的值将会是设置的两倍
解决办法：为元素添加display:inline-block;属性，因为浮动元素本身就是inline-block元素，所以设置该值没有其他影响并可以解决IE6的问题

4、IE低版本不支持html5新标签的问题

解决方式1. 在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。

但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。

解决方式2：在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题
<script src="../js/html5shiv.min.js"></script>
文件下载

条件注释
因为我们只需要让低版本的浏览器才加载第三方的js库来解决兼容问题，高版本的浏览器本身就支持html5标签，所以不需要引入，于是我们就需要使用到条件注释

<!--[if !IE]> 除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->