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

Question

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

zac*_*eat 7 html whitespace internet-explorer

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

Internet Explorer 7中:29
火狐3.0.3:37(正确)
的Safari 3.0.4(523.12.9):38
谷歌的Chrome 0.3.154.9:38

请忽略以下事实:

Webkit(Safari/Chrome)浏览器在body标记的末尾插入一个额外的文本节点
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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kor*_*nel 10

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

在下面的:

<p>
<input>
</p>

Run Code Online (Sandbox Code Playgroud)

W3C DOM规范说<p>有3个子节点("\n" <input>和"\n"),IE会假装只有一个.

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

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

Run Code Online (Sandbox Code Playgroud)

流行的JS框架具有这些功能.

归档时间：	16 年，10 月前
查看次数：	5650 次
最近记录：	12 年，4 月前