这是一个 Firefox 浮动错误吗？答案

【问题标题】：Is this a Firefox float bug?这是一个 Firefox 浮动错误吗？
【发布时间】：2015-07-21 09:39:55
【问题描述】：

设计师要求采用两列内容区域布局，左列图像，右列文本，第一张图像下方有全角引号。

客户将在这个由 CMS 驱动的网站中输入内容，因此列需要根据需要垂直扩展。真实站点上没有背景颜色，因此列不需要等高。

<div class="container">
    <div class="top-left">Picture here</div>
    <div class="full-width">
        <blockquote>Blockquote here</blockquote>
    </div>
    <div class="bottom-left">Picture here</div>
    <div class="top-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    </div>
</div>

.container {
    width: 300px
}
.top-left {
    background:red;
    width:100px;
    height:100px;
    float:left;
}
.top-right {
    background:blue;
    margin-left:100px;
    width:200px;
}
.full-width {
    background:purple;
    float:left;
    width:100%;
    height:80px;
}
.bottom-left {
    background:green;
    float:left;
    width:100px;
    height:100px;
}
p {
    padding:10px;
}

它在 Safari、Chrome 和 IE 中运行良好。但是在 Firefox 中，右侧的 div 中出现了一个奇怪的问题。

我的修复：http://jsfiddle.net/rfoc71pe/

我在这里看到了一个与无限宽度和空白相关的 FF 浮动错误，但这里似乎并非如此，因为我的所有宽度都已定义并且单词正在换行。

问题：有谁知道为什么会发生这种情况以及它实际上是一个错误还是只是我的 CSS 的问题？我还想知道是否有一种方法可以解决它，感觉不那么hacky？谢谢！

【问题讨论】：

标签： html css firefox

【解决方案1】：

我真的认为存在某种错误。但是，我为您找到了解决方法：）这里是：JSFiddle。

HTML

<div class="container">
<div class="top-left">Picture here</div>
<div class="full-width">
    <blockquote>Blockquote here</blockquote>
</div>
<div class="bottom-left">Picture here</div>
<div class="top-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>

CSS

.container {
    width: 300px
}

.top-left {
    background:red;
    width:100px;
    height:100px;
    float:left;
}

.top-right {
    background:blue;
    margin-left:100px;
    width:200px;
}

.full-width {
    background:purple;
    float:left;
    width:100%;
    height:80px;
    padding: 10px 0 10px 0;
}

.bottom-left {
    background:green;
    float:left;
    width:100px;
    height:100px;
}

p {
    padding: 10px 10px 0 10px;
}

如果你难过，你不需要颜色，你的紫色块将是白色的。在我的解决方案中，你看不到这个块的边界。

尝试写信到 Mozilla 的论坛，并描述您的问题。

【讨论】：