html – 在“white-space：pre”中使用“float：right”

以下 HTML：

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

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

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

解决方法

我会再试一次这个答案……

white-space pre指令从字面上解释了白色空间.浏览器显示换行符,空格和制表符(br标签也被视为换行符).所以

<div>   hello

world</div>

…显示为

hello

world

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

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

http://jsfiddle.net/k5aueocr/

由于white-space：pre指令告诉浏览器逐字地解释随后找到的每个字符(因为如果你查看源,可能会显示,减去标记),投入一个向右浮动的跨度可能会引导你进入麻烦.两者都没有表现不正确,这是混合在一起的CSS元素的结果,而这些元素实际上并不是混合的.