常见兼容性问题总结

于 2017-02-08 21:10:30 发布
阅读量329 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/54933323 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素同行问题</title>
      <style type="text/css">

        .box{width: 400px;}
        .left{width:100px;height:300px;background: red;float: left;}
        .right{width: 300px;float: left;}

        /*
        在IE6下元素浮动要并在同一行的元素都要加浮动，否则会产生兼容性问题
        */
      </style>
</head>
<body>
    <div class="box">

        <div class="left"></div>
        <div class="right">
        练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习
        </div>

    </div>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE6下双边距问题</title>
    <style type="text/css">

        body{margin: 0;}
        .wrap{border: 2px solid #000;float: left;}
        .box{width: 100px;height: 100px;background: red;margin: 0 100px;float: left;display: inline;}
    /*
    IE6下的双边距BUG
    在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍

    解决办法: 给box加上display:inline;
   */



     </style>
</head>
<body>
    <div class="wrap">

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

    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE67下li的4px间隙</title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <style type="text/css">
        .list{width: 300px;font-size: 16px;}
        .list li{border: 1px solid #000;}

        a{float: left;}
        span{float: right;}

        /*清浮动*/
        li:after{content: "";display: block;clear: both;}
        li{zoom:1;}
        li{vertical-align: top;}
    /*
        IE6,7下li的4px的间隙问题

        在IE6,7下li本身没有浮动，但是内容浮动了li之间就会多出4px间隙

        解决办法：
            给li加vertical-align：top/middle/bottom
     */



    </style>
</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>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片下的空隙</title>
    <style type="text/css">

        .box{border: 1px solid black;background: red;}
        img{width: 300px;height: 300px;vertical-align:top;}
        /*
            解决办法：给img加上vertical-align:top;

         */


    </style>
</head>
<body>
    <div class="box">

        <img src="images/1.jpg" />
        <img src="images/2.jpg" />

    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE6下最小高度问题</title>
    <style type="text/css">

        .box{height: 0;background: black;overflow: hidden;}
        /*

            在IE6下高度小于19px的元素，高度都会被当做19px来处理,加上font-size:0;可以处理至2px

            解决办法：overflow:hidden; 最小只能处理至1px

         */

    </style>
</head>
<body>

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

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input背景图片滚动问题</title>
    <style type="text/css">
        input{margin: 0;padding: 0;}
        .text{width: 300px;height: 40px;border: 1px solid blue;background: url(images/sun.jpg) 0 center no-repeat #ccc;margin-bottom: 70px;}

        .box{width: 300px;height: 40px;border: 1px solid blue;background: url(images/sun.jpg) 0 center no-repeat #ccc;}
        .text2{width: 300px;height: 40px;border:none;background: 0;}

        /*
            IE6下，当内容超出时，背景图片会滚动
            解决办法：把input用一个div包起来，在div中设置样式，把input大小调的和div一样大，去掉border和background-color；

        */

    </style>
</head>
<body>
    <input type="text" name="" class="text">

    <div class="box">

        <input type="text" name="" class="text2">

    </div>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值