兼容性小结

H5标签兼容

　　

     1　　document.createElement("header");

　　　　  document.createElement("section");

　　　  　document.createElement("footer");

　       　display: block;

 

　  2　   引入js

浮动

• 元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
• 第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题
• IE6下子元素超出父级宽高，会把父级的宽高撑开
• p 包含块元素嵌套规则。
  
  
  margin

• Margin-top传递：触发BFC(overflow:hidden)、haslayout(zoom:1;)

  上下margin叠加：尽量使用同一方向的margin,比如都设置top或者bottom

  在IE6下父级有边框的时候，子元素的margin值消失;  解决方法：触发haslayout
  
  
  Display:inlne-block
  

  1 在一行显示

  2 行内属性标签支持宽高

  3 没有宽度的时候内容撑开宽度

   

  问题：

  1 代码块换行被解析

  2 ie6 7 不支持
  
  

  解决方法：

  *display:inline;

  *zoom:1;
  
  Ie6最小高度
  

  在ie6下高度小于19px的元素，高度会被当做19px处理

   

  解决方法：overflow：hidden;
  
  Ie双边距
  

  在IE6下，块元素有浮动和横向的margin值，横向的margin值会被放大成2倍

   

  解决方法：*display:inline;
  
  IE6 7 下 li

  1   左右两列布局，右边右浮动IE6 7 下折行

    解决方法：左边元素也加浮动

  2  li里元素都浮动li在IE3 7 下方会产生4px间隙问题；

    解决方法：*vertical-algin:top；
  
  IE6 7下文字溢出BUG

  两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过30px

  解决方法：两浮动元素中间避免出现内联元素或者注释

                      与父级宽度相差3px或以上
  定位
  

  • IE6 7 父级元素的overflow:hidden 是包不住子级的relative
  • 解决方发：针对IE6 7 给父级元素添加relative

   

  • IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差
  • 解决方法：避免父级宽高出现奇数

   

  • IE6下绝对定位元素和浮动元素同级的话绝对定位元素消失
  • 解决方法：让两者不是处于同级
    
    
    
    IE6 input
    
    • IE6 下input的空隙,  会透出背景的颜色
    • 解决方法：*float：left;
    
    IE6 下 输入类型表单控件背景问题
    

   

  • IE6 下 输入类型表单控件背景问题，若以小图标为在输入框的左侧，小图标会随着用户的输入左移；
  • 解决方法：给背景图片加固定定位background-attachment: fixed;
    
    
    

    PNG24兼容
    
    

    解决方法：

    • JS插件(问题:不能处理body之上png24)

    DD_belatedPNG.fix('xxx');

     

    • 原生滤镜

    _background:none;

    _filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");

    • 直接换图片。。。。