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上;