为何div空白会占据一定的空间?
我们制作页面很多情况下碰到div是空白的<div></div>

如果给div元素<b>设置了宽度<b>时,比如width:100%,此时div在IE中(IE6,IE7)将占据物理空间,而在FF中不占据物理空间(正确理解)。为了表述直观,将样式直接写在元素标签内:

<div style="width:100%"></div>

此时在IE中到底是什么在影响着最终的显示,又是如何解析的呢?

可能的影响因素:字体大小(font-size),字体行高(line-height),高度(height),溢出(overflow)

我们对上面的代码逐一添加过滤属性(具体的过程有兴趣的朋友,可以私下里实验一下,“自己动手,丰衣足食”!)

在测试的过程中,你会发现IE6和IE7的解析也不尽相同,比如在给div设置了line-height:0; height:0; 的样式后,IE7中显示正常了,不再占据物理空间了,而IE6却依然我行我素,亦或是悲!

最终的测试结果,最简单的方法是,给div设置高度(height)和溢出(overflow)属性:

<div style="width:100%;height:0;overflow:hidden; "></div>
Category: web标准 , 2008/07/31 , 18:23 , 0 Comments , 583 Read
收藏到网摘:百度搜藏 Google书签 Del.icio.us Yahoo收藏 新浪ViVi收藏夹 365天天网摘 天极网摘 我摘·网摘·网络书签 POCO网摘 YouNote网摘 和讯网摘 Bolaa博拉博客收录中心 igooi网摘 天下图摘
发表评论
昵称 [注册]
密码 游客无需密码
网址
电邮
打开HTML 打开UBB 打开表情 隐藏 记住我