当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > FireFox中上层高度不影下层的解决办法

CSS样式表
网页设计关于WEB标准的相关问题汇总
项目管理:交互-设计-制作三个角色的组合
学习CSS制作网页总结的一些经验
多个CSS样式表争夺特定选择符的控制权
网页设计制作CSS实现隔行换色两种方法
CSS教程:DIV底部放置文字
CSS教程:CSS命名参考
CSS教程:控制网页文件大小通过精简CSS实现
CSS教程:关于文字溢出问题的研究
符合web标准的嵌入Flash的方法
学习WEB标准必备的四项技能
CSS对表格单元格强制换行和不换行
CSS制作符合网站标准的细线表格
区分IE6,IE7和firefox的CSS hack
CSS教程:学习CSS的继承性
CSS教程:CSS兼容的技巧
CSS教程:浮动元素对浏览器的支持
闭合浮动元素让CSS代码更规范
深入分析网页CSS隐藏文字和以图换字技术
看懂《CSS hack浏览器兼容一览表》

CSS样式表 中的 FireFox中上层高度不影下层的解决办法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 152 ::
收藏到网摘: n/a

在写网站时,遇到一个差点让我抓狂的事情。以下是一个很简单的网页:



提示:您可以先修改部分代码再运行


在这个网页中,创建了三个层,上面两个层是并列的,下面一个层是单独的,在IE中浏览可以达到我想要的结果,如下图所示:

    在上图中,左边的层用于输出文章内容,右边的层用于输出树型菜单,下面的层用于输出版权信息。整个网站都做完之后,突然想起在FireFox中测试一下效果,看看是否兼容,没想到在Firefox中的效果居然完全不同。如下图所示。

    从上图中可以看出,左边的层并没有将下面的层“挤”下去,而是超过了下面的层。这么一来,版权信息就会横在文章内容之中了。如果仅仅只是Firefox是这样的话,也就算了,可是连Opera、Flock都是这种显示结果,让我不得不改了,研究了很久,终于让我找到了一个解决方法,就是在下面的层上加上 “clear:both”,如下所示:



提示:您可以先修改部分代码再运行

最后结果如下所示,一切OK。