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

站长资源 2024/7/2 佚名

2 0 1

黑松山资源网 Design By www.paidiu.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.paidiu.com

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

黑松山资源网 Design By www.paidiu.com

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

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

最新文章

Della乐团《睡眠四部曲》心灵美疗自然睡眠

2024/7/2

小甜甜《布兰妮·斯皮尔斯 9CD合集》1999-20

2024/7/2

群星《香港乐坛/70/80/90经典歌曲合集》视频

2024/7/2

范宗沛林海2001-故事[台湾流动的月光套装再

2024/7/2

群星2015-3688想入非非电影原声带[新加坡版

2024/7/2

一句话新闻

一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/7/2

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年07月02日

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

CSS 模块化实现方法

CSS 书写有怎样的功能

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

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

CSS 模块化 实现方法

CSS 书写有怎样的功能

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

CSS 模块化实现方法