码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-04-19 08:49:14      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

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

.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>

 

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

标签:

原文地址:http://www.cnblogs.com/clown3/p/5406767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!