Question

以下源代码会提醒以下结果：

Internet Explorer 7 ：29
Firefox 3.0.3 ：37（正确）
Safari 3.0.4（523.12.9）：38
Google Chrome 0.3.154.9 ：38

请忽略以下事实：

Webkit（Safari / Chrome）浏览器在正文标记的末尾插入额外的文本节点
Internet Explorer在其空白节点中没有新行，就像它们应该的那样。
Internet Explorer没有开始的空白节点（＆lt; form＆gt;标记之前有明显的空格，但没有匹配的文本节点）

在测试页面中的标签中，以下标签后面的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>

Answer 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框架具有此类功能。

Answer 2

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

Answer 3

我猜测浏览器之间的表格标记不同。

e.g。默认表自动神奇地包含哪些节点？

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

Answer 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>

因此它会破坏一些空标记并添加一些默认属性。

Answer 5

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

<!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节点。

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

5 个答案: