IE兼容性问题

1.H5标签兼容。
解决：
js:document.createElement("footer");
css:display: block;
或者直接使用 html5shiv.js

元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动

;

<div class="box clear">

            <body>
        
            <div class="box clear">

            <div class="left">
                <h2>左边</h2>
            </div>

            <div class="right">
                <h2>右边</h2>
            </div>
            

        </div>
        
        
    </body>
<style>
        .clear:after{
            content: '';
            display: block;
            clear: both;
        }
        .clear{
            clear: both;
        }
            .box{
                width: 400px;
                border: 1px solid black;
                /*float: left;*/
                //overflow:hidden;
            }
            .left{
                float: left;
                background-color: red;
            }
            .right{
                float: right;
                background-color: blue;
            }
            h2{
                float: left;
                margin: 0;
                height: 30px;
            }
        </style>

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


3.IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：
           不要让子元素的宽高超过父级

4.p 包含块元素嵌套规则

5.margin兼容性问题
1、margin-top传递
触发BFC、haslayout
2、上下margin叠压
尽量使用同一方向的margin，比如都设置top或者bottom，

display:inline-block

<style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                display: inline-block;
                *display:inline;
                *zoom:1;
            }
 </style>

6.IE6 最小高度问题


7.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离

#box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

          渐进识别的方式，从总体中逐渐排除局部。

          首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。
          接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{
                  background-color:#f1ee18;/*所有识别*/
                  .background-color:#00deff9; /*IE6、7、8识别*/
                  +background-color:#a200ff;/*IE6、7识别*/
                  _background-color:#1e0bd1;/*IE6识别*/
              }

8.当元素浮动后再设置margin那么就会产生双倍边距
解决方案：
针对ie6、7添加display:inline

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

.list li{
                height: 30px;
                border: 1px solid red;
                line-height: 30px;
                *vertical-align: top;
            }
 .list li a{
                float: left;
            }
 .list li span{
                float: right;
            }

解决方案：
               针对ie6，7添加*vertical-align: top;

10.浮动元素之间注释，导致多复制一个文字问题

 <!--
　　 两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px
            解决方案：
                1、两个浮动元素中间避免出现内联元素或者注释
                2、与父级宽度相差3px或以上
        -->
  
    <body>
        <div class="wrap">
            <div class="left"></div>
            <span></span><!-- IE下文字溢出BUG -->
            <div class="right">&darr;这是多出来的一只猪</div>
        </div>

　　　　<style>
            .wrap{
                width: 400px;
            }
            .left{
                float: left;
            }
            .right{
                width: 398px;
                float: right;
            }
        </style>
    </body>

12.IE6 7 父级元素的overflow:hidden 是包不住子级的relative

<body>
        <div class="box">
            <div class="content"></div>
        </div>
    </body>
<style>
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                border: 10px solid black;
                overflow: hidden;
                /**position: relative;*/
            }
            .content{
                width: 400px;
                height: 400px;
                background-color: blue;
                position: relative;
            }
        </style>

解决方案：
               针对ie6、7给父级元素添加相对定位

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

14.IE6下绝对定位元素和浮动元素并列绝对定位元素消失
解决方案：
               浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们

只要让他们俩不处于同级就可以避免这个bug。

15.IE6 下input的空隙

<div class="box">
            <input type="text" />
        </div>
<style>
            .box{
                width: 200px;
                border: 1px solid #000000;
                background-color: red;
            }
            .box input{
                border: 0;
                margin: 0;
                width: 200px;
                height: 30px;
                background-color: #fff;
                *float: left;
            }
        </style>

可以看出input与box间有1px间隙
解决方案：
               给input元素添加float
16.IE6 下输入类型表单控件背景问题

CSS hack
针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
9 所有的IE10及之前
+ * IE7及ie7以下的ie浏览器认识
_IE6及ie6的ie浏览器认识

17.IE6不支持png24 图片。
解决方案：
JS插件(问题:不能处理body之上png24)
DD_belatedPNG.fix('xxx');
原生滤镜
   _background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="XX.png", sizingMethod="crop");

相关推荐