1.H5标签兼容问题
对于H5标签不兼容IE6/IE7/IE8的问题，类似header，section，footer，我们可以使用js中动态创建标签的方法document.createElement(“header”);css中H5标签是内联元素，添加display:block;的方法解决问题
pie.js和pie.css是网上提供的免费部分兼容样式；
2. 元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
.box{ width: 400px; border: 1px solid black; overflow:hidden; } .left{ float: left; background-color: red; } .right{ float: right; background-color: blue; } h2{ float: left; margin: 0; height: 30px; } 左边 右边
3. 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题;
解决方案：1、不建议这么写,脱离文档刘和不脱离文档流不在一个层级上，导致渲染解析出现问题2、用浮动解决。
4. IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：不要让子元素的宽高超过父级
5. p 包含块元素嵌套规则。
当我们使用p来包含一个DIV,然后我们审查元素就会发现，就会变成如下代码；![图片描述][2]
6. margin兼容性问题
1、margin-top传递
添加border可以截断，overflow:hidden zoom:1可以完美解决这个问题 ，主要是触发BFC、haslayout
2、上下margin叠压
尽量使用同一方向的margin，比如都设置top或者bottom
7. display:inline-block
解决方案：
*display:inline;
*zoom:1;触发haslayout
8.IE6 最小高度问题
IE6下最小高度19px
解决方案：overflow:hidden;
9.IE6 双边距
当元素浮动后再设置margin那么就会产生双倍边距
解决方案：针对ie6、7添加display:inline
10. li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
解决方案：针对ie6，7添加vertical-align: top;
11. 浮动元素之间注释，导致多复制一个文字问题
两个浮动元素中间有注释或者内联元素,并且和父级宽度相差不超过3px
解决方案：1、两个浮动元素中间避免出现内联元素或者注释
2、与父级宽度相差3px或以上
12.IE6 7 父级元素的overflow:hidden 是包不住子级的relative
解决方案：针对ie6、7给父级元素添加相对定位。
13. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1PX的误差
解决方案：避免父级宽高出现奇数
14. IE6下绝对定位元素和浮动元素并列绝对定位元素消失
解决方案：浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们只要让他们俩不处于同级就可以避免这个bug。加一个P元素
15. IE6 下input的空隙
解决方案：给input元素添加float
16. IE6 下 输入类型表单控件背景问题
解决方案：设置background-attachment：fixed;
17. 针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
9 IE10以及IE10以下版本的支持
- IE7以及IE7以下版本的支持
_ IE6以及IE6以下版本的支持
18. IE6不支持png24 图片。
解决方案：
JS插件(问题:不能处理body之上png24)
DD_belatedPNG.fix(‘xxx’);
原生滤镜
_background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=“XX.png”, sizingMethod=“crop”);
19. 样式优先级、提升样式优先级
默认 < 类型 < class < id < style(行间) < !important
!important 提升样式优先级权重
[1]: http://img1.sycdn.imooc.com/575d3ef30001b85808790458.png
[2]: http://img1.sycdn.imooc.com/575d3ee50001637603410257.png
