html - 这是 Firefox float 错误吗？

Question

设计者要求一个两栏的内容区域布局，左栏是图片，右栏是文本，第一张图片下方有全宽引号。

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

http://jsfiddle.net/juo0ubjw/

<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 float 错误的提及，但这里似乎并非如此，因为我所有的宽度都已定义并且单词正在换行。

问题:有谁知道为什么会发生这种情况，是否真的是错误或只是我的 CSS 有问题？我还想知道是否有一种修复它的方法感觉不那么骇人听闻？谢谢!

Answer 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;
}

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

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