IE6兼容性问题总结

与我彤在

当然，我们首先要明白什么叫兼容性问题。
由于代码写的不规范，或者不正确导致的错误，这就叫错误，不叫兼容性
当我们写了一段正确的代码，但是在不同浏览器下，产生一些不正确的解析，这叫做兼容性问题一），头文档所引起的怪异盒模型问题
    在老版本IE下，不设置文档声明，页面就会陷入怪异盒模型解析模式
    什么是怪异盒模型呢，咱们来对比一下就知道了
标准盒模型:
   width/height = content;
   可视宽/高 =  content + padding + border;这是标准盒模型的解析模式 ，从这里可以看出来，padding,border都是向外延伸，可以说是撑开了盒模型的宽高的，再来看看怪异盒模型
怪异盒模型
   width/height = 可视宽/高;
   content = width - padding - border; 从这里可以看出来，指定的width或者height就直接是可视宽高了，如果此时写了padding,那么padding只会往里去挤压内容区域的宽度，css3里面新增了这么一条样式box-sizing，用来切换标准盒模型和怪异盒模型两种解析模式  —— IE6在十几年前就知道这么回事了？哈哈...
解决方式很简单，那就是加头文档声明咯！
二），在IE6下，子元素宽高超出父级的宽高，可以把父级设置好的宽高撑开.
这里来给大家灌输一个概念，那就是占位宽
占位宽 = content + padding + border + margin;

有这么两个div 它们是嵌套关系
#box {
   width: 300px;   height: 300px;   border: 10px solid #000;}
#div {
   width: 500px;   height: 500px;   padding: 60px;   margin: 55px;   background: red;}
box包含着div
正常来说，div超出了，但是并不会印象box的宽高，因为我指定了它的固定值。
但是在IE6中，box的宽高会失效，会变成div的占位宽，也就是说此时
box的宽度 = 500（width） + 120（padding*2）+ 110（margin*2）  = 730px
高度以此类推
解决办法：严格把控子级宽高，使其不超过父级宽高三），19像素最小高度问题
在IE6下，块属性元素的高度小于19px的时候，高度会按照19px来处理.
解决办法：overflow:hidden;四）边框transparent
在IE6下给边框 如果边框的颜色设置为transparent的时候，会显示黑色解决方法border-style设置成虚线(dashed)或者点线（dotted）
五），在IE6，7下，不支持给块标签加inline-block;
解决办法 *display:inline;*zoom:1; 触发haslayout

haslayout IE渲染引擎中的一个属性,用来调节元素的渲染模式,当我们把这个属性设置为true的话，这个元素就跟根据自身的内容大小或者父级的大小，来重新计算自己的宽高.

触发hasLayout的样式：
        * display: inline-block
        * height: (任何值除了auto)
        * float: (left 或 right)
        * position: absolute
        * width: (任何值除了auto)
        * writing-mode: tb-rl
        * zoom: (除 normal 外任意值)
六），IE6下双边距BUG
在IE6下，块元素有浮动有横向的margin，横向的margin值会被放大成两倍浮动方向与margin方向一致时，该方向会出现双倍边距
.box {
width: 100px;
   height: 100px;
   background: Red;
   margin: 100px;
   float: left;
   *display: inline;
}

<div class="box"></div>       
解决办法: display:inline;注：在让几百个小白去做页面并且兼容IE6的过程中，padding也不是十分靠谱
七），浮动元素下margin失效
在IE6下，一行元素的宽度之和 与 父级的宽度相差超过2px，则最后一行元素的下margin失效

.box {
width: 563px;
   border: 1px solid #000;
   overflow: hidden;
}
.box div {
float: left;
   width: 100px;
   height: 100px;
   margin: 20px;
   background: Red;
   *display: inline;
}
<div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
</div>       
解决办法：无

八），多出来的几只猪

在IE6下，子集元素的宽度，和父级宽度相差 小于3px，
并且两个浮动之后之间有注释或者内嵌元素，元素内容会被复制
.box {
width: 400px;
}
.left {
float: left;
   width:399px;
   height: 10px;
   background: #31708f;
}
.right {
float: right;
   width: 398px;
}


<div class="box">
        <div class="left"></div>
        <!-- IE6下文字溢出BUG -->
        <div class="right">↓这是多出来的一只猪</div>
</div>
解决办法：可以用div把注释或者内嵌元素包起来 九），li之间的间隙
在IE6，7下li本身没有加浮动，但是li的内容都浮动,li下边就会有4个px的间隙。

.list {
        width: 200px;
        margin: 0;
        padding: 0;
        list-style: none;
}
.list li {
        height: 30px;
        border: 1px solid #000;
        line-height: 30px;
}
.list a {
        float: left;
}

.list span {
        float: right;
}

<ul class="list">
        <li>
                <a href="#">左侧</a>
        </li>
        <li>
                <a href="#">左侧</a>
        </li>
        <li>
                <a href="#">左侧</a>
        </li>
</ul>
十），绝对定位元素消失
在IE6下，当浮动元素和绝对定位元素，是同级关系的话(并且浮动元素的占位宽度和父级小于3px)，绝对定位元素会消失掉
.box {
width: 200px;
   height: 200px;
   border: 1px solid #000;
   position: relative;
}
.box div {
float: left;
   margin: 0 0 0 48px;
   width: 150px;
   height: 150px;
   background: red;
   *display: inline;
}
.box span {
position: absolute;
   left: 10px;
   top: 0;
   width: 50px;
   height: 50px;
   background: yellow;
}

<div class="box">
        <div></div>
        <span></span>
</div>
解决办法：把绝对定位元素单独包起来十一），定位偏移量误差
在IE6下，父级的宽高是奇数的话，元素的right值和bottom值会有1px的偏差.
.box {
width: 301px;
   height: 301px;
   border: 1px solid #000;
   position: relative;
}
.item {
position: absolute;
   right: 0px;
   bottom: 0px;
   width: 100px;
   height: 100px;
   overflow: hidden;
   background-color: red;
}

<div class="box">
        <span class="item"></span>       
</div>
解决办法: 父级最好为偶数;