兼容问题 css的常见问题
1、IE6.7不兼容H5标签 eg：<header></header> <section></section>
解决办法一：创建自定义元素，并把元素display设置为block
<style>
header,section{display:block}
</style>
<script>
document.createElement(“header”);
document.createElement(“section”);
</script>
解决办法二：引入成熟的js库<script src=“html5shiv.js”></script>
2、元素浮动后，能设置宽度的话就给元素设置宽度，如果需要宽度是由内容撑开，就给它里面的块元素加上浮动（需要让谁去浮动，让谁去自适应，就给谁加浮动）
3、第一块元素浮动，第二块元素加margin值，那么在IE6下会有间隙问题
解决办法：1、不建议这么做
2、用浮动解决（给第二块元素也加浮动，并去掉margin值）
4、IE6下子元素超出父级宽高，会把父级的宽高撑开
解决办法：1、不要让子元素的宽高超过父级
5、p包含块元素的嵌套规则
下列元素是块元素不能再嵌套块元素：p、td、h1~h6
6、margin兼容性问题：1、margin-top传递 解决办法：触发BFC以及hasLayout 标准浏览器下加给父级加边框 IE6、7加zoom：1
2、同级元素 上下margin叠加 解决办法：尽量设置同一方向的margin，比如都设置top
7、display：inline-block 在IE6、7下无效，解决办法：*display：inline ； *zoom：1； *是hack，针对不同浏览器不同的css样式的过程加css hack
8、IE6的最小高度是19px 解决办法：overflow：hidden；
9、IE6的双边距问题：给元素加上浮动后设置margin-left，IE6、7下会产生双倍边距 解决办法：*display：inline；
10、li里的元素都浮动，在IE6、7下会产生4px间隙的问题 解决办法：针对IE6、7给li添加*vertical-align：top；
11、两个浮动元素之间有注释或有内联元素，并且和父级宽度相差不超过3像素，会出现多复制一个文字的问题
解决办法：1、避免两个浮动元素之间出现注释或内联元素
2、与父级宽度之差超过3像素以上
12、IE6、7父级元素的overflow：hidden是包不住子集的relative
解决办法：给父级加上relative
13、IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差 解决办法，避免父级宽高是奇数
14、IE下绝对元素和浮动元素并列，绝对元素消失 解决办法：让两个元素不处于同级
15、IE6下input的空隙问题 解决办法，给input加float
16、IE6下输入类型表单控件背景问题