浮动元素的兼容以及ie6下li标签的部分兼容性问题

最新推荐文章于 2021-08-03 19:14:26 发布

weixin_30376323

最新推荐文章于 2021-08-03 19:14:26 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/clown3/p/5406767.html

版权

清除浮动的方法有许多比较常用的是

.clear{zoom: 1;}
.clear:after{content: "";display: block;clear: both;}

after伪类元素末尾添加内容Ie6,7不兼容可以用zoom来解决（zoom缩放会触发ie下的haslayout使元素根据自身内容计算宽高但火狐不支持但可以通过after伪类解决）

两者结合解决的浏览器不兼容的问题；

ie6下li标签的部分兼容性问题：

可以通过给li标签加

vertical-align: top;解决在ie67下的4px间隙问题及左右两列布局Ie67下的折行问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,ul{margin: 0px;padding: 0px;}
            li{list-style: none;}
            a{text-decoration: none;}
            .nav{width: 496px;height: 177px;background: #f0f0f0;margin: 30px auto; position: relative;}
            .clear{zoom: 1;}
            .clear:after{content: "";display: block;clear: both;}
            .nav ul{display: inline; position: absolute;left: 40px;top:60px;}
            .nav li{float: left;vertical-align: top;}
            .nav li a{
                display: block;
                height: 40px;
                border: 1px solid #f06000;
                padding: 0px 15px;
                margin:0 0 0 -1px;
                font-size: 14px; 
                line-height:40px;
                position:relative;
                z-index: 0;
                float: left;
                }
            .nav li a:hover{
                border: 1px solid #000000;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div class="nav clear">
            <ul class="clear">
                <li><a href="#">首页</a></li>
                <li><a href="#">欢迎你</a></li>
                <li><a href="#">欢迎大家！</a></li>
                <li><a href="#">欢迎大家！！</a></li>
                <li><a href="#">导航栏</a></li>
            </ul>
        </div>
    </body>
</html>