css兼容性问题

1、H5标签在IE低版本不兼容的问题:(浏览器不识别标签)

    解决方案:

    <script>

        document.createElenment('header'); //动态创建的自定义标签默认inline

    </script>

    <style>

        header{display:block;}

    </style>

    或 <script src="html5shiv.js"></script>

  2、第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题:

    (首先不建议这样写，第一块浮动脱离了文档流提升了半层的层级，而第二块还是原本的层级，这样写容易出现问题)

    解决方案:

    div2{margin-left:200px;}换成div2{float:left;}

  3、IE6下子元素超出父级宽高，会把父级的宽高撑开:

    解决方案:

    不要让子元素的宽高超过父级。

  4、margin的兼容性问题:

    （1）margin-top的传递

        解决方案:触发BFC(overflow:hidden;)、haslayout(zoom:1;)

                 .wrap{overflow:hidden;zoom:1;}

    （2）上下margin的叠压

        解决方案:尽量使用同一方向的margin，比如都设置top或bottom

  5、display:inline-block不兼容IE低版本:

    解决方案:div{*display:inline;*zoom:1;}

  6、IE6 最小高度(19px)问题:

    解决方案:div{overflow:hidden;}

  7、IE6 双倍边距:

    解决方案:div{*display:inline;}

  8、li里元素都浮动 li在IE6 7下方会产生4px间隙问题:

    解决方案:li{vertical-align:top;}

  9、浮动元素之间注释(并且和父级元素相差不超过3px)，导致多复制一个文字的问题:

    解决方案:(1)两个浮动元素中间避免出现内联元素或注释

                     (2)与父级元素宽度相差3px或以上

  10、IE6、7父级元素的overflow:hidden;包不住子级的relative:

    解决方案:针对IE6、7给父级元素添加相对定位*position:relative;

  11、IE6下绝对定位元素的父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差:

    解决方案:避免父级宽高出现奇数。

  12、IE6下绝对定位元素和浮动元素并列绝对定位元素消失:

    解决方案:让绝对定位元素与浮动元素不处于同级状态。

  13、IE6下input的空隙：

    解决方案: input{*float:left;}

  14、IE6下输入类型表单控件背景移动问题:

    解决方案: input{background-attachment:fixed;}

  15、IE6不支持png24 图片:

    解决方案:<script src="DD_belatedPNG_0.0.8a.js"></script>(JS插件不能处理body之上png24)

    <script>DD_belatedPNG.fix('xxx');</script>

             .body{_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");}

             (IE原生滤镜)

<mark>妙味课堂</mark>