跨度奇怪的换行

Question

出于某种原因，以下HTML代码段将%符号包装到新行（仅限FireFox）：

<span class="label">
    <input type="radio" />
    <span>
        <span>1,22</span>
        <span>%</span>
        <br />
   </span>
</span>

和css：

.label {display: inline-block;}

它是一个片段，所以它本身没有多大意义，但我不明白为什么会发生这种情况，我认为它是有效的HTML5。有人可以解释这个代码片段的问题，因为它适用于Chrome而不适用于FireFx吗？

DEMO

Answer 1

添加white-space:nowrap;应修复它：

.label {
    background-color: yellow;
    display: inline-block;
    white-space:nowrap;
}

<强> jsFiddle example

Answer 2

正在发生的事情是Firefox正在将您的第二个范围解释为与<br/>元素内联。尝试将<br/>元素放在包含2个跨度的跨度之外，如下所示：

<span class="label">
    <input type="radio" />
    <span>
      <span>1,22</span>
      <span>%</span>

    </span>
    <br />
</span>

http://jsfiddle.net/gc0sq29k/12/

Answer 3

Firefox会错误地呈现此内容。

Inline blocks应使用 shrink-to-fit 算法：

  

通过格式化内容而不计算 首选宽度   除了发生显式换行之外的其他行，

     

计算 首选最小宽度 ，例如，尝试所有可能的   换行。

     

找到 可用宽度 ：在这种情况下，这是宽度   包含块减去'margin-left'的使用值，   'border-left-width'，'padding-left'，'padding-right'，   'border-right-width'，'margin-right'，以及任何相关的宽度   滚动条。

     

然后缩小到合适的宽度是：

     

min（最大（优选最小宽度，可用宽度），首选宽度）

在这种情况下：

1. preferred width是没有任何自动换行的宽度。
2. preferred minimum width是最宽元素的宽度，在本例中为“1,22。”
3. available width是文档正文的宽度，在本例中为100％。
因此，

min(max(preferred minimum width,available width), preferred width)应该等于preferred width。

您可以通过更改HTML或使用white-space:nowrap来修复Firefox的行为。

但我还有另一种选择：br是 inline element ，但将其更改为块元素可以解决问题。

这样做不应对HTML中的任何其他br元素产生影响（我能想到）。

Fiddle