FireFox中上层高度不影下层的解决办法

网页制作 2024/12/23 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

在写网站时，遇到一个差点让我抓狂的事情。以下是一个很简单的网页：
<!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> <title> 有关在FireFox中上层高度不影下层的解决办法 </title></head><body> <div style="width:500px;"> <div style="float:left; width:200px; background-color:#F9C7CF"> 上一层，放在左边上一层，放在左边上一层，放在左边 </div> <div style="float:right;width:300px; background-color:#00FFFF"> 上一层，放在右边 </div> <div style="text-align:center; background-color:#F0F082; width:500px;"> 下一层，放在下面 </div> </div></body></html>
提示：您可以先修改部分代码再运行

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

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

从上图中可以看出，左边的层并没有将下面的层“挤”下去，而是超过了下面的层。这么一来，版权信息就会横在文章内容之中了。如果仅仅只是Firefox是这样的话，也就算了，可是连Opera、Flock都是这种显示结果，让我不得不改了，研究了很久，终于让我找到了一个解决方法，就是在下面的层上加上 “clear:both”，如下所示：
<!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> <title> 有关在FireFox中上层高度不影下层的解决办法 </title></head><body> <div style="width:500px;"> <div style="float:left; width:200px; background-color:#F9C7CF"> 上一层，放在左边上一层，放在左边上一层，放在左边 </div> <div style="float:right;width:300px; background-color:#00FFFF"> 上一层，放在右边 </div> <div style="text-align:center; background-color:#F0F082; width:500px; clear:both;"> 下一层，放在下面 </div> </div></body></html>
提示：您可以先修改部分代码再运行

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

FireFox,上层高度

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“FireFox中上层高度不影下层的解决办法”

暂无评论...

www.csstdc.com 快活林资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

更新日志

2024年12月23日

FireFox中上层高度不影下层的解决办法

CSS 模块化实现方法

CSS 书写有怎样的功能

评论“FireFox中上层高度不影下层的解决办法”

更新日志

友情链接

FireFox中上层高度不影下层的解决办法

CSS 模块化 实现方法

CSS 书写有怎样的功能

评论“FireFox中上层高度不影下层的解决办法”

更新日志

友情链接

CSS 模块化实现方法