当前位置：首页 → 问答吧 → ie6下的margin问题

ie6下的margin问题

时间：2010-11-18

来源：互联网

<!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=gb2312" /> <title>无标题文档</title> <style> *{ margin:0; padding:0; } body{ width:980px; margin:0 auto; } .clear{ clear:both; } #top{ height:100px; border:1px solid #000; margin:0 auto 10px auto; } #left{ width:300px; height:500px; float:left; border:1px solid #000; } #right{ width:650px; height:500px; float:right; border:1px solid #000; } #bottom{ border:1px solid #000; height:100px; } </style> </head> <body> <div id="top">top</div> <div id="left">left</div> <div id="right">right</div> <div class="clear"></div> <div id="bottom">bottom</div> </body> </html>
提示：您可以先修改部分代码再运行

IE6下bottom层跟上面有10px的间距是什么原因怎么解决

作者: hui35698 发布时间: 2010-11-18

应该是clear层的IE6默认高度吧。
在.clear里面加上 _display:none; 就行了。

作者: iJieZhang 发布时间: 2010-11-18

您这个方法用到了hack，_这个符号wc3不认识呀。还有别的方法么

作者: hui35698 发布时间: 2010-11-18

你在.clear 加上
====================================

.clear { clear:both; overflow: hidden; font-size: 0; height: 0;}

===============下面是百度的回答=============================

IE6下默认的字体尺寸大致在 12 - 14px 之间，当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高度的层。

要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度的自动调整。比如 <div style="height: 6px; font: 0px Arial;"></div> 或者 <div style="height: 6px; overflow: hidden;"></div> 都可以阻止 IE 的自作聪明。

该问题在 IE7 / Firefox /Opera 下均不存在。

作者: ywheat 发布时间: 2010-11-18

ie6下的margin问题

热门阅读

热门下载