html - <span> "float: right"里面有 "white-space: pre"

Question

以下 HTML:

<div style="white-space: pre">
  long time; <span style="float: right;">// know C?</span>
</div>

在 WebKit 和 Gecko 中呈现不同。使用 WebKit，span 的内容与前面的文本保持在同一行，但使用 Gecko，它们被移到新的一行。

哪种行为是正确的，为什么？

Answer 1

我会再次尝试这个答案...

white-space 前置指令从字面上解释空白。换行符、空格和制表符由浏览器显示(br 标签也被视为换行符)。所以

<div>   hello

world</div>

...显示为

    hello

world

float:right 指令将元素从正常的文本流中取出，并将其放置在容器的右侧，指示文本和元素应该环绕它。

Firefox 将水平填充可用空间，因此 float 的 div 会转到下一行。 Chrome 不会选择这样做，而是将 float 元素保持在同一行上(尽管两个 div 都显示为 block ，因此显示为完整的可用宽度)。这解释了你的不同之处。看到这个 fiddle 。

http://jsfiddle.net/k5aueocr/

由于 white-space:pre 指令告诉浏览器按字面解释随后找到的每个字符(如果您查看源代码可能会显示，减去标签)，抛出一个向右浮动的范围可能让你陷入困境。两者都没有表现不正确，这是将本来不应该混合的 CSS 元素混合在一起的结果。