IE6-7下margin-bottom不兼容解决方法（非原创，视频中看到的）

在IE低版本下有很多不兼容，现在将看到的   IE6-7下margin-bottom不兼容解决方法   演示一下，方便日后自己查阅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <style>
        .test1{
            zoom:1;/*兼容IE6*/
            margin-bottom: 10px;/*IE6-7无法正常显示可以采用padding-bottom*/
        }
        .test1::after{
            content: '';display: block;clear: both;
        }
        .t1{
            float: left;
        }
    </style>
</head>
<body>
    <div class="test1">
        <div class="t1">1111</div>
    </div>
    <div class="test2">222</div>
</body>
</html>

 

 

从上面可以看到，在IE6-7下面.test1里面有浮动（有做清楚浮动），那么.test1会出现margin-bottom值失效的问题，.test1可以直接使用padding-bottom来解决兼容。

 

本人是小白，第一写，不喜勿喷。

posted @ 2017-03-06 18:00  Tsingtree  阅读(260)  评论(0)  编辑  收藏  举报