这是一个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浮点错误，但这似乎并非如此，因为我所有的宽度都已定义并且单词包装。

问题：有人知道为什么会发生这种情况吗？是否实际上是一个错误或我的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;
}

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

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