当前位置：首页 → 问答吧 → IE6与IE7下margin没有效果

IE6与IE7下margin没有效果

时间：2011-01-08

来源：互联网

今天看了一篇帖子，介绍了“闭合浮动”与“清除浮动”：
http://bbs.blueidea.com/thread-3010051-1-1.html
所以就自己写了一个demo试试，但是却出现了一个意想不到的BUG：
父级元素用到了“闭合浮动”后，子元素的margin在IE6与IE7下并没有完全展开，详细请在IE6与IE7下看c1（绿色的边框）的margin并没有撑开p1（红色的边框）
请高人解答！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0px; padding:0px;} .p1{border:1px solid #ff0000; width:960px; margin:10px auto;} .c1{border:1px solid #33FF00; width:300px; height:500px; float:left; margin:10px; display:inline;} .c2{border:1px solid #0033FF; width:200px; height:100px; float:left; margin:10px; display:inline;} .c3{border:1px solid #000000; width:300px; height:300px; float:left; margin:10px; display:inline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{zoom:1;} </style> </head> <body> <div class="p1"> <div class="c1">c1</div> <div class="c2">c2</div> <div class="c3">c3</div> <div class="clearfix"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: tonyc 发布时间: 2011-01-08

你把clearfix样式里的visibility:hidden去掉就应该没问题了.

作者: xushuai86 发布时间: 2011-01-08