css - 带有 float 和 nowrap 的 Firefox 错误？

Question

在这个 fiddle 中，为什么 B 从黄色容器中掉出来？

http://jsfiddle.net/en7qfto1/

在 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 ，这在代码本身中表明这是由于已知限制造成的:

The cause is this code in 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;
    }

I wonder whether the right thing to do is:

• not manipulate the available width at all, or
• make the available width infinite, since the nowrap content is never going to wrap around the float anyway

(In theory, the correct solution is not to try placing the float until the following break opportunity. I wonder if other browsers do that.)

I actually think this is quite doable; we already defer layout of floats in mBelowCurrentLineFloats; we just need to do something similar and notify line layout at break opportunities. It's far from trivial, though. (We also need to place the float immediately if we're currently at a break opportunity... I think.)

我也想知道这是否是其他浏览器所做的(Chrome 和 IE 的行为相同，将 float 放在与内联 block 相同的行上)。不幸的是，我不完全理解 float 和 line breaks 之间的相互作用。 ，所以我无法进一步评论。