7

以下源代码警告以下结果：

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 没有起始空白节点（<form> 标签前有明显的空白，但没有匹配的文本节点）

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

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

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

这是一个提供一些背景信息的链接，但没有理想的解决方案。这个问题可能没有解决方案，我只是对这种行为感到好奇。

感谢互联网，扎克

<!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>
4

5 回答 5

10

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

在下面的：

<p>
<input>
</p>

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

解决方案是在所有浏览器中跳过文本节点：

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

流行的 JS 框架具有此类功能。

于 2008-11-22T23:51:38.543 回答
0

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

于 2008-11-11T17:04:54.723 回答
0

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

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

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  </tfoot>
</table>
于 2008-11-11T17:38:36.200 回答
0

为什么不尝试遍历 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>

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

于 2008-11-14T02:30:50.270 回答
0

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

于 2013-05-01T00:47:51.423 回答