浏览器的兼容性问题

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>

标准浏览器下

    

ie6下，出现了红色的上下边框，解决方法：给input加上float:left;