第一种兼容
在设置宽度的时候，子级的宽度大于父级的宽度时。
标准浏览器下，子级的宽度不会撑开父级
IE浏览器下会撑开对应的宽度
第二种兼容
IE6中不能用margin的方法让元素显示在一行，
必须使用float的方法，让内容显示在一行。
第三种兼容
嵌套问题：P标签不能包div
就是说P标签不能包含块标签
第四种兼容
元素的最小高度
IE6中会自动给高度添加为19。因为IE6认为最小高度为19px，如果不足，自动补全
如果想要设置高度小于19px的，做到浏览器兼容，
必须添加overflow：hidden；
第五种兼容
边框：不支持1px的边框，两厘米以上就支持了
标准浏览器中双边距：里 中 外三个分别是n px;
IE浏览器中支持3px以上，并且平分n px。
第六种兼容
margin：如果想让margin在IE中正常显示，需要调用haslayout，在父级用zoom=1；
调用
.box{ background: #f00; / 标准浏览器下正常显示 / / border: 1px solid #f00; / overflow: hidden; /ie触发 需要使用zoom：1； 触发haslayout / zoom:1; } .div{ width: 200px; height: 200px; background: #00f; margin: 100px; }
第七种兼容
IE的双边距
正常在IE中设置margin不会出现双边距的问题
如果div设置了float，就会出现双边距
如果解决双边距问题，添加：display：inline；
（双边距的意思是margin：100px;的时候显示200px）
.box{ width: 200px; height: 200px; background: red; float: left; margin: 100px; display: inline; }
第八种兼容
IE中li会出现缝隙
当使用li标签时，没用让所用的li浮动时，在IE6中就会出现缝隙；
解决方法：float
或者是vertical-align：top;
第九种兼容
IE中li会出现缝隙
最小高度和缝隙同时出现的时候，必须用float解决。
第十种兼容
ie最恐怖的兼容问题之一
如果父级元素的宽度超过子级总宽度的3px，会出现下边距消失的情况
如果子级不满行的情况下，最后一行会出现下边距消失的情况
解决：给最后一个元素加visibility:hidden;元素消失，但是不让出原来的空间
第十一种兼容
如果子元素的宽度比父级的宽度大，或者等于父级的宽度，
这时，如果子元素的兄弟是注释或者行级元素，文字就会溢出；行级元素越多，溢出的越多
解决：创建一个div，将所有的行级元素包起来，变成块级，就好了。
第十二中兼容
浮动 和 定位 的兼容问题
IE中当浮动元素和定位元素是兄弟关系时，决定定位会失效
解决：让浮动元素和定位元素不是兄弟关系
用div或者块其他标签把a标签包起来。
十三种兼容
定位 兼容问题
如果想要出现文字滚动的效果，IE6,7,8直接使用相对定位，在父级中overflow是包不住子元素
解决：给父元素也添加一个相对定位 position：relative;
十四种兼容
定位时 边框的奇偶数
在IE6里如果定位的父级宽度为奇数的时候子元素的right和bottom会有1px的偏差
解决：没办法解决，穿件页面的时候，尽量使用偶数值，包括字体大小
十五种兼容
IE6中不支持position：fixed；
可以用JS的滚动和赋值来解决
opacity在IE6里面不兼容
可以使用
filter:alpha; （opacity=50）进行兼容
十六种兼容
input 表单的兼容
IE中会出现1px的缝隙
解决：让input框浮动
十七种兼容
图片兼容问题
不识别png图片，不支持透明
用js来解决这个问题
十八种兼容
[if IE]> 我是 ie
十九种兼容
css 的hack
+ ie7 以下,包括ie7可以用的样式
-ie6以下,包括ie6可以用的样式
\ ie7以下,包含ien可以用的样式