兼容性-CSDN博客

css常见兼容问题

H5标签兼容在IE6,7下的兼容

HTML5的标签在IE6, 7下不能使用，比如

解决方案：引用一个js的库文件。
增加<script src="js/html5shiv.js"></script>的引用。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/html5shiv.js"></script>
        <style>
            header{
                width: 200px;
                height: 200px;
                display: block;
                background-color: red;
            }
            section{
                width: 150px;
                height: 150px;
                display: block;
                background-color: yellow;
            }
            footer{
                width: 100px;
                height: 100px;
                display: block;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <section>section</section>
        <footer>footer</footer>
    </body>
</html>

问题：在IE6..下的元素浮动问题

问题描述：在ie6下，一个浮动元素内部子元素为块级元素时，块级元素会撑破作为浮动元素的父级，占据父级元素所在的一行，不被父级包裹。
解决方案：为块级的子元素添加浮动，就会被父级包裹。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 400px;
                border: 1px solid black;
                overflow:hidden;
            }
            .left{
                float: left;
                background-color: red;
            }
            .right{
                float: right;
                background-color: blue;
            }
            h2{
                float: left;
                margin: 0;
                height: 30px;
            }
        </style>
        <!--
            解决方案：h2元素添加float: left;
        -->
    </head>
    <body>
        <div class="box">
            <div class="left">
                <h2>左边</h2>
            </div>
            <div class="right">
                <h2>右边</h2>
            </div>
        </div>
    </body>
</html>

在IE 下浮动元素与非浮动元素之间会莫名的产生间隙。

解决方案：为非浮动元素添加浮动属性。

IE6下子元素超出父级宽高，会把父级的宽高撑开。而在其他浏览器下不会，只是脱离父级的包裹而已，父级的宽高不改变。

有三个块级元素不能包含块元素

不能包含块级元素否则会产生布局的bug.

<p>标签
<td>标签
<h1>~<h6>标签

margin-top传递

问题描述：子元素使用margin-top属性时，会把margin-top传递给父级元素，使得父元素具有了margin-top属性和属性值
解决方案：使父元素触发BFC和haslayout

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                background-color: green;
                overflow: hidden;//触发BFC
                zoom:1;//触发haslayout
            }
            .item{
                height: 50px;
                background-color: red;
                margin-top: 50px;
            }
            .mt100{
                margin-top: 100px;
            }
        </style>
        <!--
            1、margin-top传递
                触发BFC、haslayout
            2、上下margin叠压
                尽量使用同一方向的margin，比如都设置top或者bottom，
        -->
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
            <div class="item mt100"></div>
        </div>
    </body>
</html>

IE6兼容display:inline-block;

问题描述：在ie6下没有display: inline-block属性，所以可以通过hack方案模拟解决。
解决方案： *display:inline;
*zoom:1;
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                display: inline-block;
                *display:inline;
                *zoom:1;
            }
        </style>
        <!--
            解决方案：
                *display:inline;
                *zoom:1;
        -->
    </head>
    <body>
        <div>div</div>
        <div>div</div>
        <div>div</div>
    </body>
</html>

在IE6下有默认最小的高度19px;

问题描述：在设置元素最小高度时，ie6下的元素默认最小为19px;如果元素设置的高度小于19px,会导致设置的最小高度无效。
解决方案：为该元素添加overflow: hidden;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                height: 1px;
                background-color: red;
                overflow: hidden;
            }
        </style>
        <!--
            IE6下最小高度19px
            解决方案：
            overflow:hidden;
        -->
    </head>
    <body>
        <div></div>
    </body>
</html>

浮动下的IE6，７双边距

问题描述：当元素浮动后再设置margin值就会产生双倍边距。
解决方案：针对IE6 ,7 添加display: inline;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .box{
                width: 750px;
                border: 1px solid #000;
                overflow: hidden;
            }
            .item{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-left: 50px;
                float: left;
                *display: inline;
            }
        </style>
        <!--
            当元素浮动后再设置margin那么就会产生双倍边距
            解决方案：
                针对ie6、7添加display:inline
        -->
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </body>
</html>

IE6,7下的4px问题。

问题描述： li元素里面的子元素浮动，会导致该li元素下方产生4px的间隙。
解决方案：
针对ie6，7添加vertical-align: top;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .list{
                margin: 0;
                padding: 0;
                list-style: none;
                width: 300px;
            }
            .list li{
                height: 30px;
                border: 1px solid red;
                line-height: 30px;
                *vertical-align: top;
            }
            .list li a{
                float: left;
            }
            .list li span{
                float: right;
            }
        </style>
        <!--
            解决方案：
                针对ie6，7添加vertical-align: top;
        -->
    </head>
    <body>
        <ul class="list">
            <li>
                <a href="">左边</a>
                <span>右边</span>
            </li>
            <li>
                <a href="">左边</a>
                <span>右边</span>
            </li>
            <li>
                <a href="">左边</a>
                <span>右边</span>
            </li>
            <li>
                <a href="">左边</a>
                <span>右边</span>
            </li>
        </ul>
    </body>
</html>

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

.wrap{
width: 400px;
}
.left{
float: left;
}
.right{
width: 398px;
float: right;
}

↓这是多出来的一只猪

IE6,7下，父级元素的overflow: hidden属性包裹不住具有relative属性的子元素。

解决方案：给父元素添加relative属性，使其在同一级之中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <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给父级元素添加相对定位
        -->
    </head>
    <body>
        <div class="box">
            <div class="content"></div>
        </div>
    </body>
</html>

IE6下会的兼容

问题1：在IE6下绝对定位元素的父级元素宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差。

问题2：浮动元素和绝对定位元素是同级的话定位元素就会消失。
解决方案：只要让他们俩不处于同级就可以避免这个bug。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 200px;
                height: 200px;
                border: 1px solid black;
                position: relative;
            }
            .item{
                width: 150px;
                height: 150px;
                background-color: red;
                float: left;
                margin-left: 50px;
                *display: inline;
            }
            .box span{
                width: 50px;
                height: 50px;
                background-color: yellow;
                position: absolute;
                right: -10px;
                top: -10px;
            }
        </style>
        <!--
            解决方案：
                浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们只要让他们俩不处于同级就可以避免这个bug。
        -->
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
            <p>
                <span></span>
            </p>
        </div>
    </body>
</html>

问题3：IE6下input的空隙

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <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元素添加float
        -->
    </head>
    <body>
        <div class="box">
            <input type="text" />
        </div>
    </body>
</html>