一个 Firefox 的 CSS bug

像 Firefox 和 Chrome 这样的浏览器,一直都紧跟 W3C 标准,几乎可以认为是完全实现了标准,但什么事也都不是绝对的,最近我就发现了一个 Firefox 的 bug,而且还是 CSS2.1 的,一直都没有修复。

这个 bug 并不复杂,重现起来很简单:

<style>
div { white-space:nowrap; }
div i { float: right; }
</style>

<div>一些不重要的文字 <i>我浮动了</i></div>

实例看下面:

一些不重要的文字我浮动了

如果在 Firefox 中查看,你就会发现浮动元素跑到了下一行,这跟其他浏览器中的行为是不一样的(当然,除了 IE6-7 这两个怪物)。具体在 Firefox 中的表现是,如果一个浮动元素的前面有行内内容(比如文字),并且父元素又设置了 white-space: nowrap 或者 white-space: pre,那么浮动元素就会另起一行,不管原先那行放不放得下。这个行为是不符合 CSS2.1 里的定义的。

这个 bug 其实很久以前就有人提出了,但 Firefox 一直没有修复,也不知是遇到了什么解决不了的问题。

参考:Bug 488725 – float pushed down one line with white-space: nowrap;

flight