FireFox网页布局时候内容需自动换行时float属性不起作用

最新推荐文章于 2021-12-18 04:34:59 发布

comefirst

最新推荐文章于 2021-12-18 04:34:59 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： firefox float dreamweaver div ie html

本文链接：https://blog.youkuaiyun.com/comefirst/article/details/1583974

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个左右分栏布局在Firefox浏览器中出现的问题及解决方案。当右栏内容过长时，原本并排显示的两栏会变成堆叠显示。文中提供了一种通过Hack CSS的方法来修复该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Dreamweaver8编写如下代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#left{
    float:left;
    background-color:#3366FF;
}
#right{
    float:left;
    background-color:#33CCCC;
}
</style>
</head>
<body>
    <div id="left">
      这个是中间左边的内容
    </div>
    <div id="right">
      <div>这里是一段较长的内容，注意firefox与IE中与左边内容位置关系的不同。这里是一段较长的内容，注意firefox与IE中与左边内容位置关系的不同。这里是一段较长的内容，注意firefox与IE中与左边内容位置关系的不同。</div>
    </div>
</body>
</html>

想要创建左右分栏的布局，但是由于右边的内容过多，会产生一个自动换行。在Dreamweaver预览与IE浏览器中查看的时候，布局是正确的。但是，在FireFox中，却变成了上下的布局。也就是此处的float:left属性无效了。

此时可以采用Hack CSS方法，在CSS中添加代码，注意[xmlns]后面有空格。