zoukankan      html  css  js  c++  java
  • 兼容性问题--HTML+CSS

    兼容性问题有哪些?

     

    1、IE6下怪异盒模型

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

     怪异盒模型总宽度=width

    2、IE6下最小高度问题

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

     解决办法

      1、overflow:hidden 推荐

      2、font-size: 0;

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

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

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

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

    解决办法

    overflow: hidden;

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

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

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

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

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

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

    解决办法

      用filter

    8、IE6不支持固定定位

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

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

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

     解决办法

        给后面元素也添加浮动

    10、IE6下双边距问题

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

    解决方法

       给元素添加display:inline;

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

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

    解决办法

      触发父级的layout

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

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

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

       解决方法

      用padding解决

     

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

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

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

    14、IE6下文字溢出的问题

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

    解决办法

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

    3、把父级的宽度加3px

    15、IE67li间隙问题

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

    解决办法

    1、给li加vertical-align: middle;

    2、给li浮动

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

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

    解决办法

    给父级也加相对定位

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

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

       解决办法

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

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

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

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

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

       解决方法

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

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

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

    解决办法

      给控件加浮动

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

        解决办法:不使用

    22、IE6不支持png透明图片

        IE6不支持png-24透明图片

  • 相关阅读:
    dedecms初解
    Java二十三设计模式之------单例模式
    Java二十三设计模式之------工厂方法模式
    数组和集合的区别及深入了解
    团队项目计划
    团队介绍及团队题目
    第二阶段冲刺(第十天)
    第二阶段冲刺(第九天)
    第二阶段冲刺(第八天)
    第二阶段冲刺(第七天)
  • 原文地址:https://www.cnblogs.com/shengnan-2017/p/7676842.html
Copyright © 2011-2022 走看看