这是一个Firefox浮动bug吗？

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。

超文本标记语言

<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 论坛并描述您的问题。