设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> CSS >> 无内容div占据空间的触发条件和解决方法
精品推荐
CSS点击TOP10
·常用CSS大全
·网页制作知识:div+css 面试题目
·改变IE的字体大小设置时,页面字体不发生改变,怎样实现?
·网页特效代码:纯CSS制作的网页下拉菜单
·网页制作实例CSS用一张图片实现圆角
·用CSS实现图片垂直居中方法
·CSS:标准的 语义的 非侵入的页签切换
·CSS+JS打造类似QQ的网站导航菜单特效
·CSS 属性表简表
·DIV CSS网页布局实例解析:实现表格形式
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 (教程)
·如何做才能成为一名优秀的网页设计师
·初学者入门:如何学习网页制作?
·用FrontPage 2000下载整个网站
·网页对联广告代码效果大全
·用JavaScript实现文件图片滚动效果
·全面理解javascript的caller,callee,call,apply概念
·常用CSS大全
·CSS实现的网页中文字排版的几种方式
精选专题

无内容div占据空间的触发条件和解决方法

作者: 来源:http://www.xgdown.com/ 时间:2007-9-13 11:10:21

当在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>

无内容div占据空间的触发条件和解决方法 相关文章:
无内容div占据空间的触发条件和解决方法 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com