Internet Explorer 中的空白文本节点不一致答案

【问题标题】：Inconsistent Whitespace Text Nodes in Internet ExplorerInternet Explorer 中的空白文本节点不一致
【发布时间】：2008-11-11 16:43:02
【问题描述】：

以下源代码提示以下结果：

Internet Explorer 7：29
Firefox 3.0.3：37（正确）
Safari 3.0.4 (523.12.9)：38
谷歌浏览器 0.3.154.9：38

请忽略以下事实：

Webkit (Safari/Chrome) 浏览器在正文标记的末尾插入一个额外的文本节点
Internet Explorer 的空白节点中没有新行，就像它们应该的那样。
Internet Explorer 没有起始空白节点（
标记前有明显的空白，但没有匹配的文本节点）

在测试页面中的标签中，以下标签在它们之后的 DOM 中没有插入空白文本节点：form、input[@radio]、div、span、table、ul、 a.

我的问题是：是什么让这些节点成为 Internet Explorer 中的例外？ 为什么在这些节点之后没有插入空格，而在其他节点中插入了空格？

如果您切换标签顺序，将文档类型切换为 XHTML（同时仍保持标准模式），此行为是相同的。

这是link that gives a little background information，但没有理想的解决方案。这个问题可能没有解决方案，我只是对这种行为感到好奇。

感谢互联网，扎克

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
        function countNodes()
        {
            alert(document.getElementsByTagName('body')[0].childNodes.length);
        }
        </script>
    </head>
    <body onload="countNodes()">
        <form></form>
        <input type="submit"/>
        <input type="reset"/>
        <input type="button"/>
        <input type="text"/>
        <input type="password"/>
        <input type="file"/>
        <input type="hidden"/>
        <input type="checkbox"/>
        <input type="radio"/>
        <button></button>
        <select></select>
        <textarea></textarea>
        <div></div>
        <span></span>
        <table></table>
        <ul></ul>
        <a></a>
    </body>
</html>

【问题讨论】：

延迟喊出 node.children 而不是 node.childNodes：groups.google.com/forum/?fromgroups=#!topic/mozilla.dev.gaia/…developer.mozilla.org/en-US/docs/DOM/Element.children

标签： html internet-explorer whitespace

【解决方案1】：

IE 试图提供帮助并隐藏仅包含空格的文本节点。

如下：

<p>
<input>
</p>

W3C DOM 规范说<p> 有 3 个子节点（“\n”、<input> 和“\n”），IE 会假装只有一个。

解决方法是在所有浏览器中跳过text nodes：

var node = element.firstChild;
while(node && node.nodeType == 3) node = node.nextSibling;

流行的 JS 框架都有这样的功能。

【讨论】：

我在尝试让我的 javascript 代码在 FF 和 IE 中工作时遇到了类似的问题。这很有帮助。

【解决方案2】：

嗯...我会说它是 IE 的原因。我不认为程序员有这样做的特定意图。

【讨论】：

嗯，我的意思不是“他们为什么要这样设计？”中的“为什么”。从某种意义上说，我的意思是“这些节点之间有什么相关性以使它们以这种方式行事？”感觉。

【解决方案3】：

我猜table标签在浏览器之间是不同的。

例如默认表自动包含哪些节点？

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  </tfoot>
</table>

【讨论】：

当然，这会改变 table 标签的 childNodes，我正在查看 body 的 childNodes。尝试使用 IE Developer Toolbar 查看 DOM 中的空白节点。 microsoft.com/downloads/…

【解决方案4】：

为什么不尝试遍历 DOM 并查看每个浏览器认为文档包含的内容？

IE 对 DOM 做了很多“优化”。要了解这可能是什么样子，请在 IE 中“全选”、“复制”，然后在 Visual Studio 中“粘贴备用”，您会得到以下信息：

<INPUT value="Submit Query" type=submit> 
<INPUT value=Reset type=reset> 
<INPUT type=button> 
<INPUT type=text> 
<INPUT value="" type=password> 
<INPUT type=file> 
<INPUT type=hidden>
<INPUT type=checkbox>
<INPUT type=radio>
<BUTTON type=submit></BUTTON> 
<SELECT></SELECT>
<TEXTAREA></TEXTAREA>

所以它会删除一些空标签并添加一些默认属性。

【讨论】：

【解决方案5】：

Zachleat，我想我已经找到了解决问题的办法。（我冒昧地将表单元素移动到表单标签中。）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--REF http://stackoverflow.com/questions/281443/inconsistent-whitespace-text-nodes-in-internet-explorer -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function countNodes()
    { alert(document.getElementsByTagName('form')[0].childNodes.length);
    };
</script>
</head>
<body onload="countNodes()">
  <form
    ><input type="submit"/
    ><input type="reset"/
    ><input type="button"/
    ><input type="text"/
    ><input type="password"/
    ><input type="file"/
    ><input type="hidden"/
    ><input type="checkbox"/
    ><input type="radio"/
    ><button></button
    ><select></select
    ><textarea></textarea
    ><div></div
    ><span></span
    ><table></table
    ><ul></ul
    ><a></a
  ></form>
</body>
</html>

如您所见，我已经拆分并捆绑了结束的 gt（大于）括号，以便它们紧贴下一个标签，从而确保没有模棱两可的空格。

令人惊喜的是，它适用于迄今为止尝试过的所有（4 个桌面）浏览器，所有浏览器都报告相同数量的 DOM 节点。

【讨论】：

是的，这是解决问题的一种方法。不过，我喜欢让我的标记更简洁一些，并且可能更喜欢上面的其他解决方案之一。
我认为这看起来很合理，而且您不会随机创建任何额外的冗余节点！话虽如此，我刚刚调试并发现 SAFARI [v.3] 有时会随机报告错误的 offsetTop，因此如果依赖它会搞砸事情。但这是一个不同的问题。简单的解决方法似乎仍然可以。