1、css兼容问题
（1）IE6不识别html5标签
解决：引入html5shiv.js库
（2）IE6元素左右浮动，子元素设置高度后，父元素的浮动消失
解决：给子元素也加上浮动
（3）IE6下第一块元素浮动后，第二块元素加的margin-left值等于第一块元素的宽度，会有间隙问题
解决：第二块元素去掉margin-left，添加浮动
（4）IE6下子元素宽高大于父元素宽高时，会把父元素撑开
解决：不让子元素宽高大于父元素宽高
（5）p、td、h标签都不要嵌套块元素
（6）margin-top传递
解决：触发BFC或者haslayout
上边距margin叠加
解决：尽量使用同方向的margin，比如都设置top或bottom
（7）IE6下display:inline-block无效
解决:加上dispaly:inline-block;dispaly:inline;*zoom:1;
（8）IE6下最小高度1px却为19px
解决：加上overflow：hidden；
（9）IE6/7下，元素浮动后再加上margin会出现双边距问题
解决：加上*dispaly:inline；
（10）IE6/7下，假如li中的子元素都浮动，li之间会有4px间隙问题
解决：在li中添加*vertical-align:top;
（11）IE6下两个浮动元素中间有注释或者行内元素，并且浮动元素和父元素宽度相差3px，会出现文字溢出bug
解决：避免两个浮动元素中间有注释或者行内元素，或者与父元素宽度相差3px以上
（12）IE6/7下，父元素的overflow:hidden包不住子元素，假如子元素有position:relative定位
解决：给父元素也加上position:relative定位
（13）IE6下父元素宽高为奇数且有定位时，子元素相对父元素的定位会有1px的偏差
解决：避免父元素宽高为奇数
（14）IE6下input的空隙
解决：input加float：left
（15）IE6下输入类型控件中图片会输输入的内容滚动
解决：给图片加fixed定位
BFC的触发：
根元素或其它包含它的元素；
浮动 (元素的float不为none)；
绝对定位元素 (元素的position为absolute或fixed)；
行内块inline-blocks(元素的 display:
inline-block)；
表格单元格(元素的display:
table-cell，HTML表格单元格默认属性)；
overflow的值不为visible的元素；
弹性盒 flex boxes (元素的display:
flex或inline-flex)；
BFC的特性：
一个元素不能同时存在于两个BFC中；
内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
处于同一个BFC中的元素相互影响，可能会发生margin collapse；
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；