Question

在这个小提琴中，为什么B会从黄色容器中掉出来？

在Chromium中不会发生。

这是Firefox的错误吗？

这是代码：

<style>
.a, .b
{
    display: inline-block;
    background: lightblue;
}

.b
{
    float: right; 
}

.c
{
    background: yellow;
    white-space: nowrap;
}
</style>

<div class=c>
    <a class=a>A</a>
    <a class=b>B</a>
</div>

Answer 1

是的，这是一个错误。您可以找到Bugzilla门票here。

David Baron指出cause，它在代码本身中表明这是由于已知的限制：

原因是nsLineLayout :: ReflowFrame中的代码：
    if (psd->mNoWrap) {
      // If we place floats after inline content where there's
      // no break opportunity, we don't know how much additional
      // width is required for the non-breaking content after the float,
      // so we can't know whether the float plus that content will fit
      // on the line. So for now, don't place floats after inline
      // content where there's no break opportunity. This is incorrect
      // but hopefully rare. Fixing it will require significant
      // restructuring of line layout.
      // We might as well allow zero-width floats to be placed, though.
      availableWidth = 0;
    }
我想知道正确的做法是：


根本不操纵可用宽度，或

使可用宽度无限，因为nowrap内容永远不会包围浮动


（理论上，正确的解决方案是不要尝试将浮动放置到下一个中断机会。我想知道其他浏览器是否会这样做。）

我实际上认为这是可行的;我们已经推迟了mBelowCurrentLineFloats中浮动的布局;我们只需要做类似的事情并在休息机会时通知线路布局。然而，这远非微不足道。（如果我们目前处于休息时间，我们还需要立即放置浮动......我想。）

我也很想知道这是否与其他浏览器相同（Chrome和IE的行为相同，将浮动放在与内联块相同的行上）。不幸的是，我并不完全理解浮点数和line breaks之间的相互作用，因此我无法进一步评论。

Answer 2

I ran into the same bug, and for me the best workaround was to use an equivalent flexbox layout: http://jsfiddle.net/nquyefaq/.

It behaves the same on Chrome, Firefox and IE11:

Both items render on the same line, with inline-block type behaviour.
The second item is right-aligned. (Instead of float: right it uses margin-left: auto.)
If the items have fixed width (mine do), the second item drops down onto the next line if the container becomes too narrow.

I hope this helps someone else looking for a workaround.

浮动和nowrap的Firefox bug？

2 个答案: