HTML兼容性

一、兼容性

兼容性：页面在不同的浏览器中可能会显示不同。开发人员适配不同浏览器的过程就叫兼容性。

二、兼容问题

1. 在IE6下，子级的宽度会撑开父级设置好的宽度

提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同

<style>
        #box {
            width: 300px;
        }
        .left {
            width: 200px;
            background-color: red;
            height: 300px;
            float: left;
        }
        .right {
            width: 200px;
            float: right;
        }
        .div {
            width: 170px;
            height: 170px;
            padding: 15px;
            background: blue;

        }
    </style>
    <div id = "box">
        <div class="left"></div>
        <div class="right">
            <div class="div"></div>
        </div>
    </div>

2. IE6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动才可以

<style>
        #box {
            width: 400px;
        }
        .left {
            background: red;
            float: left;
        }
        .right {
            background: yellow;
            float: right;
        }
        h3{
            margin: 0;
            height: 40px;
            float: left;
        }
    </style>
    
    <div id = "box">
        <div class="left">
            <h3>左侧</h3>
        </div>
        <div class="right">
            <h3>右侧</h3>
        </div>
    </div>

3. 在IE6、7下，元素要通过浮动排在同一排，就需要给这行元素都加浮动

<style>
        #box {
            width: 400px;
        }
        .left {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .right {
            width: 200px;
            height: 100px;
            background: blue;
            /* margin-left: 100px; */
            float: left;
        }
    </style>
    
<div id = "box">
        <div class="left">
            <h3>左侧</h3>
        </div>
        <div class="right">
            <h3>右侧</h3>
        </div>
    </div>

4. 注意标签的嵌套规则

5. 在IE6下，元素的高度如果小于19px的时候，会被当成19px来处理，

解决方法：overflow：hidden；

6. 在IE6下不支持1px的 dotted 边框样式

解决方法：切背景平铺

7. hasLayout：在IE下大部分兼容性都是因为hasLayout属性的触发问题，尽量出发hasLayout属性，可以减少很多IE下的兼容性的问题。

在IE下父级有边框的时候，子元素的margin回失效
解决方法：触发父级的 hasLayout 属性

8. IE6下双边距的bug

在IE6下，块元素有浮动有横向的margin 的值的时候，横向的 margin 的值会扩大两倍

.box {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
        margin: 100px;
        display: inline;
       }
<div class="box"></div>

margin-Left： 一行中左侧的第一个元素有双边距
margin-right： 一行中右侧的第一个元素有双边距

解决方法：display：inline；

9. 在IE6、7下，li 本身没有浮动， li 里面的内容有浮动，li 下会产生一个间隙

解决方法：

扫描二维码关注公众号，回复： 16181699 查看本文章

1. 给li 加浮动
2. 给li 加 vertical-align：top
3. 在IE6下最小高度的bug 和 li 的间隙问题共存的时候，给li 加浮动， vertical-align 不好使

ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 300px;
        }
        li {
            list-style: none;
            height: 30px;
            border: 1px solid #000;
            float: left;
            /* vertical-align: top;*/
        }
        a {
            width: 100px;
            height: 30px;
            float: left;
            background: red;
        }
        span {
            width: 100px;
            height: 30px;
            float: right;
            background: blue;
        }
<ul>
        <li>
            <a href="#"></a>
            <span></span>
        </li>
        <li>
            <a href="#"></a>
            <span></span>
        </li>
        <li>
            <a href="#"></a>
            <span></span>
        </li>
    </ul>

10. 在IE6，当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的margin-bottom会失效

还没有解决方法，避免出现超过3px，和出现不满行的情况

.box {
            border: 10px solid red;
            width: 600px;
            overflow: hidden;
        }
        .box div {
            width: 100px;
            height: 100px;
            background: blue;
            border: 5px solid #000;
            margin: 20px;
            float: left;
            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>

11. 在IE6下的文字溢出bug

子元素的宽度和父级的宽度如果相差小于3px的时候，
两个浮动元素中间的注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多
解决办法：用div 把注释或者内联元素包起来

.box1 {
            width: 400px;
        }
        .left1 {
            float: left;
        }
        .right1 {
            float: right;
            width: 400px;
        }
<div class="box1">
        <div class="left1"></div>
        <!-- 上面是left部分-->
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="right1">右边的部分</div>
    </div>

12. 在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效

解决方法：
不让浮动元素和绝对定位元素是兄弟关系，用div 或者其它标签 把a标签包起来

.box2 {
            width: 200px;
            height: 200px;
            border: 1pc solid #000;
            position: relative;
        }
        .box2 a {
            position: absolute;
            width: 40px;
            height: 40px;
            background: red;
            right: 20px;
            top: 0px;
        }

        .box2 ul {
            width: 150px;
            height: 150px;
            background: yellow;
            margin: 0 0 0 50px;
            padding: 0;
            float: left;
            display: inline;
        }
        
<div class="box2">
        <ul></ul>
        <div>
            <a href="#"></a>
        </div>
    </div>

13. 在IE6、7下，子级元素有相对定位，父级overflow包不住子级元素

解决方法：给父级也加相对定位

.box3 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
            position: relative;
        }
        .div3 {
            width: 150px;
            height: 300px;
            background: red;
            position: relative;
        }

<div class="box3">
        <div class="div3"></div>
    </div>

14. 在IE6下，如果绝对定位的父级的宽高是奇数的时候，子级元素的right 和 bottom 值会有1px的偏差

15. IE6透明度，使用filter 兼容透明度

opacity:0.5;
filter: alpha(opacity=50)

16. 在IE6、7下，输入型的表单标签控件 上下会有1px的间隙

解决方法：给input加浮动

17. 条件注释语句，适配低版本IE时常使用

<!--[if ie]>
        我是IE
    <![endif]-->
    <!--[if ie 6]>
        我是IE 6
    <![endif]-->
    <!--[if ie 7]>
        我是I7
    <![endif]-->
    <!--[if ie 8]>
        我是IE8
    <![endif]-->