element.innerHTML = element.innerHTML改变了Firefox 4中的布局

Question

我在浏览旧的Ext文档http://extjs.cachefly.net/ext-3.2.1/docs/?class=Ext.grid.PropertyGrid

时发现了一个奇怪的问题

继承框的布局（右上角）有些破碎。

broken layout http://img339.imageshack.us/img339/374/bildschirmfoto20110427u.png

但执行后

var resblock = document.getElementById('docs-Ext.grid.PropertyGrid').getElementsByClassName('res-block-inner')[0];
resblock.innerHTML = resblock.innerHTML; // should be a no-op(?)

一切都很好。

okay layout http://img204.imageshack.us/img204/374/bildschirmfoto20110427u.png

怎么会这样？ Firefox 4中的一个错误？

---

修改的 最小的测试用例：http://jsfiddle.net/uZ3eC/

Answer 1

是的，看起来像一个错误 Firefox 4 的方式，处理处理行结尾。

resblock元素是一个<pre>元素，包含许多文本节点，用于处理新行和缩进。当它们通过脚本构造时，它们包含一个CARRIAGE RETURN（U + 000D），后面是一系列不间断的空格。

然而，在运行resblock.innerHTML = resblock.innerHTML;之后，它们现在包含一个LINE FEED（U + 000A），后面是不间断的空格。

Firefox 4似乎只将换行符视为换行符，并将类层次结构的各部分呈现在新行上。

编辑：鲍里斯说的话。

HTML5草案规范第8.2.2.3 Preprocessing the input stream节说：

  

U + 000D CARRIAGE RETURN（CR）字符   和U + 000A LINE FEED（LF）字符   特别对待。任何CR   LF后跟的字符   必须删除字符和任何CR   字符后面没有LF   必须将字符转换为LF   字符。因此，HTML中的换行符   DOM由LF字符表示，   而且从来没有任何CR角色   在标记化的输入中   阶段。