兼容性问题--HTML+CSS

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

兼容性问题有哪些?

1、IE6下怪异盒模型

   标准盒模型:总宽度=width+padding+border

 怪异盒模型:总宽度=width

2、IE6下最小高度问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

   IE6下块元素高度小于19px,会被当做19px来处理

 解决办法 :

  1、overflow:hidden 推荐

  2、font-size: 0;

3、IE6下不支持1px的点线

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

  IE6不支持一像素的点划线,用背景图代替

4、IE6下内容会把父级的高度撑开

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  IE6下内容会把父级的高度撑开

解决办法

overflow: hidden;

5、IE6下只支持给a标签添加伪类

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

  IE6不支持除了a标签以外标签的伪类

6、IE6、7下不支持给块标签加display:inline-block

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

  IE67不支持块元素display:inline-block

7、IE8以及IE8以前的浏览器都不支持opacity

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  IE8以及IE8以前的浏览器都不支持opacity

解决办法

  用filter

8、IE6不支持固定定位

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

  IE6不支持固定定位,可以用js来解决

9、IE6下前面元素浮动,后面元素不浮动后他们之间会有间隙

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  IE6下前面元素浮动,后面元素不浮动后他们之间会有间隙

 解决办法

  给后面元素也添加浮动

10、IE6下双边距问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  IE6下块元素有浮动,并且有横向margin(左右),那最终的距离是原来的两倍

解决方法

   给元素添加display:inline;

11、IE67下父级有边框,子级有margin的话会不起作用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  在IE67下,父级有边框,子级有margin,那子级的margin会不起作用

解决办法

  触发父级的layout

12、IE6下,每行元素的宽度与父级的宽度相差超过2px,最后一行的margin-bottom会失效(IE7不管相差多少,直接失效)

  IE6下,每行元素的宽度与父级的宽度相差超过2px,最后一行的margin-bottom会失效

IE7下,不管宽度相差多少,直接失效

   解决方法:

  用padding解决

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

13、IE6下元素中除了文字之外,还有inline-block类型元素,元素的行高会失效

  在IE6下,元素中除了文字之外,还有inline-block类型元素,那元素的行高会失效

解决办法: 分别包起来,分别设置行高

14、IE6下文字溢出的问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  在IE6下,两个浮动元素中间有注释或者空行内标签,父级的宽度和子元素宽度相差小于3px,元素内的文字会被复制出来

解决办法

1、把注释或者行内元素用div包起来

3、把父级的宽度加3px

15、IE67li间隙问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  IE67下,li里有左右浮动的元素,会造成每个li下边有间隙的问题

解决办法

1、给li加vertical-align: middle;

2、给li浮动

16、IE67下子级有相对定位,并且比父级要大。那父级overflow:hidden;后是包不住它的

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  IE67下子级有相对定位,并且比父级要大。那父级overflow:hidden;后是包不住它的

解决办法

给父级也加相对定位

17、IE6下同一层级的浮动元素会盖住绝对定位元素

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

    IE6下同一层级的浮动元素会盖住绝对定位元素

   解决办法

   给定位元素外面嵌套一个层

18、IE6下定位父级的宽高是奇数的话,元素的right值或者bottom值会有1px的偏差

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

  在IE6下,定位父级的宽高是奇数的话,元素的right值或者bottom值会有1px的偏差

19、IE6下通过margin负值,使元素移出父级的位置,那出去的部分会被截掉

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

    IE6下通过margin负值,使元素移出父级的位置,那出去的部分会被截掉

   解决方法

     给元素添加相对定位,或者给父级overflow:hidden;

20、IE67下输入类型的表单控件,上下两边各有1px的间隙

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

  IE67下输入类型的表单控件,上下两边各有1px的间隙

解决办法

  给控件加浮动

21、IE8以及IE8之前不识别H5标签

    解决办法:不使用

22、IE6不支持png透明图片

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

    IE6不支持png-24透明图片

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

上一篇:Ceph剖析:数据分布之CRUSH算法与一致性Hash


下一篇:FCC JS基础算法题(6):Truncate a string(截断字符串)