中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
中国互联
艺魂宝库网
时代网
招聘求职
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS技巧DIV为空时占据空间的解决办法

CSS技巧DIV为空时占据空间的解决办法

来源:中国设计秀    作者:    点击:68     加入收藏

CSS小技巧之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>

0
顶一下
2007-10-18 15:01:00    出处:
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口