奇怪的跨度换行

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/> 元素放在 span 之外，像这样包裹 2 个 span：

<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 should use the shrink-to-fit算法：

calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur,

calculate the preferred minimum width, e.g., by trying all possible line breaks.

find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is:

min(max(preferred minimum width,available width), preferred width)

在这种情况下：

preferred width是没有任何换行的宽度。
preferred minimum width 是最宽元素的宽度，在本例中为“1,22.”。
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

奇怪的跨度换行

Weird line-break in span

html

css

firefox