IE6-7兼容性问题及解决方案-优快云博客

1，h5标签兼容

h5新增标签（header,footer,aside,section.....）在ie8以下是不认识的

解决方法一:通过document.createElement（‘header’）,自己创建一个新的标签，因为是自定义的标签，浏览器会默认为是内敛元素，所以

我们要给创建的标签添加上display:block；方能生效；这样一个个创建有点麻烦

方法2：用网上成熟的库html5shiv.js

2，浮动兼容

box{
    width:500px;
    border:1px solid #000;
   overflow: hidden;
}
.right{

    background: red;
    float: right;
}
.left{
    background: yellow;
    float:left;
}

<div class="box">
     <div class="right">
         <h2>rigth</h2>
     </div>
    <div class="left">
        <h2>left</h2>
    </div>
</div>

显示应该是这样

当我给h2添加样式

h2{
    margin: 0;
    height: 30px;
}

在ie7以下就变成这样了

解决方法：让其也浮动，或者变为内联元素

h2{
    margin: 0;
    height: 30px;
   /* float:left*/ display: inline;
}

3，在ie7以下当子级的宽高大于父级时，父级会被撑大成子级的宽高

4，标签的正确嵌套

 p td h 标签里面不能嵌套块级标签

<h> <div>div</div></h>在ie7以下是这样的

所以不要这样写

5，margin问题

.box{background: green}

.item{ height: 50px;
    background: red;
    margin: 50px;
}

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

下面的这个样子，我想应该都知道这个问题margin重叠和margin-top的传递，重叠问题我就不讲了，我就说说传递的问题

解决这个问题我们一般会给父级加上overflow:hidden

.box{background: green;overflow:hidden}

这个在一般标准的浏览器下问题就解决了

但是在ie7以下就不行了(ie7以下属于非标准浏览器)，解决方法是给父级加上zoom:1触发非标准浏览器的haslayout，

.box{background: green;
    overflow: hidden;
    zoom: 1;
}

6，display：inline-block问题

box div { width: 100px;
        height: 100px;
        background:red;
       display: inline-block;
}

<div class="box">
     <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

标准浏览器下显示如图

ie6显示

解决方法：

.box div { width: 100px;
       height: 100px;
       background:red;
       display: inline-block;
        *display:inline;
        *zoom:1
   }


7，最小高度问题

div{ height:1px;
     background: red;
   

<div></div>
ie6下的显示，会发现这根本就不像是1px的高度，量取会发现高度为19px，说明ie6下的最小高度是19px，
解决方法：加上overflow: hidden;

8，ie6，7 下li的子级都浮动时会产生4px的间隙
ul{margin: 0;
    padding:0;
    list-style:none;
   width: 300px;
}
ul li{
    height: 30px;
    border:1px solid red;
    line-height: 30px;
   
}
li a{float:left}
li span{float:right}

<ul>
    <li>
        <a href="#">左边</a>
       <span>右边</span>
    </li>
    <li>
        <a href="#">左边</a>
        <span>右边</span>
    </li>
    <li>
        <a href="#">左边</a>
        <span>右边</span>
    </li>
</ul>

解决方法：给li加上*vertical-align:top

9，ie6下文字会被复制
.box{ width: 400px}
.left{float:left;}
.right{float:right;width: 400px}

<div class="box">
    <div class="left"></div>
    <span></span><span></span><span></span>
    <div class="right">这里是文字溢出现象</div>
</div>

触发条件：当子级元素左右都浮动时，当left和right之间有内联元素或注释并且.right的宽度与父级宽度差小于3px时

当我们插入的内联元素越多，被复制的文字就越多

解决方法：1不要有内联元素或注释，2，将.right的宽度小于父级的宽度，如：397px

<div class="box">
    <div class="left"></div>
    <div class="right">这里是文字溢出现象</div>
</div>

10，ie6下当子级设置了position：relative时，父级包不住子级
.box{
    width:200px;
    height:200px;
    background: red;
    border: 5px solid #000;
    overflow: hidden;
}
.child{
    width:300px;
    height:300px;
    background: yellow;
    position:relative;
}

<div class="box">
    <div class="child"></div>
</div>

解决方法:给父级也加上position:relative;

10,IE6下绝对定位元素和浮动元素并列绝对定位元素消失
 .box{
        width:200px;
        height:200px;
        border:1px solid #000;
        position:relative;
    }
.left{
    width: 150px;
    height:150px;
    background: red;
    float:left;
    margin-left: 50px;
   *displsy:inline   /*防止双边距*/
}  

 span{ width:50px;
        height:50px;  
        background: yellow;    
        position:absolute;    
        top:-20px;   
        right:0; 
  }

<div class="box">
     <div class="left"></div>
    <span></span>
</div>

正常浏览器应该是这样
    

ie6下是这样
   
解决方法：不要让其并列<div class="box">
     <div class="left"></div>
     <p>
         <span></span>
     </p>
</div>

11，IE6下input的空隙
.box{
          width: 200px;
          background:red;
          border:1px solid #000
      }
input{
    border:0;
    margin: 0;
    width:200px;
    height:30px;
    background: #fff;
}
<div class="box">
    <input type="text" />
</div>