<span>在“white-space：pre”中使用“float：right”

Question

以下HTML：

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

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

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

Answer 1

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

white-space pre指令从字面上解释了空格。浏览器显示换行符，空格和制表符（br标签也被视为换行符）。所以

<div>   hello

world</div>

...显示为

    hello

world

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

Firefox会水平填充可用空间，因此浮动的div会进入下一行。 Chrome不会选择这样做并将浮动元素保持在同一行（尽管两个div都显示为块，因此显示为完整的可用宽度）。这解释了你的不同之处看到这个小提琴。

http://jsfiddle.net/k5aueocr/

由于white-space：pre指令告诉浏览器按字面解释随后找到的每个字符（因为如果你查看源，可能会显示，减去标记），投入一个浮动到右边的跨度可能是引导你陷入困境。两者都没有表现不正确，这是混合在一起的CSS元素的结果，而这些元素并不是真正意义上的混合。