CSS兼容性问题以及解决方案

*H5标签兼容：header    section     footer  等

       使用js创建标签document.creatElement("header");

*元素浮动之后，能设置宽度的话，就给元素加宽度，如果需要宽度是内容撑开，就给它里面的快元素加上浮动

       清理浮动：overflow:hidden;

*第一块元素浮动，第二块加margin值等于第一块元素，在IE6下会有间隙问题

        1.不建议这么写

        2.用浮动解决，两边都浮动

*IE6下子元素超出父级宽高，会把父级的宽高撑开

     不要让子元素的宽高超过父级

*p包含块元素嵌套规则（块元素不能再嵌套块元素：p；td；h1~h6）

     不嵌套

*margin兼容性问题

     magrin-top传递：触发BFC及haslayout

     上下magrin叠压：尽量使用同一方向的magrin

*display:inline-block （IE6不支持）

     display:inline;  zoom:1;

*IE6最小高度问题：19px

    overflow:hindden;

*IE6双边距：当元素浮动后再设置margin那么就会产生双边距

   针对IE6，IE7添加：display:inline

*li里元素都浮动，li在IE6，IE7下方会产生4px间隙问题

   添加vertial-align:top;

*浮动元素之间注释，导致多复杂一个文字问题

   1.两个浮动元素中间避免出现内联元素或者注释

    2.与父级宽度相差3px或以上

*IE6，IE7父级元素的overflow:hidden是包不住子级的relative

   给父级添加相对定位

*IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差

   避免父级宽高出现奇数

*IE6下绝对定位元素和浮动元素并列（同级）绝对定位元素消失

   不处于同级就可以避免该bug

*IE6下input的空隙

   给input添加浮动/float

*IE6下输入类型表单控件背景问题

   设置background-attachment:fixed

CSS Hack:针对不同浏览器写不同的样式：

 \9所有的IE9及以前：background:blue\9;

*属性 IE7及以下：*background:green;

_属性 IE6以及的   _background:yellow;