浏览器兼容与BFC详解

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

绝对定位元素 (元素的positionabsolutefixed);

行内块inline-blocks(元素的 display: inline-block);

表格单元格(元素的display: table-cell,HTML表格单元格默认属性);

overflow的值不为visible的元素;

弹性盒 flex boxes (元素的display: flexinline-flex);


BFC的特性:

       一个元素不能同时存在于两个BFC中;

      内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个的常规流);

     处于同一个BFC中的元素相互影响,可能会发生margin collapse;

     每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;

     BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;

     计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;

     浮动盒区域不叠加到BFC上;





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章