IE11 的控制台报告我有多个 body 标签答案

【问题标题】：IE11's Console reporting that I have more than one body tagIE11 的控制台报告我有多个 body 标签
【发布时间】：2023-03-11 18:23:02
【问题描述】：

我不断在 IE11 控制台上收到此消息

HTML1514：发现额外的“
”标签。应该只存在一个“”标签每个文件。文件：登录，行：76，列：1

当我阅读 HTML 时，只有一个 body 标签。我阅读了 IE 的 1514 消息，我找不到任何会导致此问题的内容。

有没有一个很好的工具可以尝试找出 IE 真正在抱怨什么？我能想到的最好的办法是，我加载的库之一可能在脚本中有一些东西，但即便如此，除非它被添加到 dom 中并被删除，否则这也没有任何意义。

我唯一能想到的另一件事是，我也得到了 HTML1521，但那是暂时的，因为脚本仍在构建页面。这是一个 SPA 应用，所有代码都发生在 body 和 \body 之间，这样我就不用看 body 标签了。

我在 Chrome 或 FF 中都没有看到这个。如果不是因为我必须支持 IE，我不会担心这个消息。

我已尝试发布代码，但为了公开曝光而将 IP 剥离出来已经破坏了一切，因此我没有进行公开代码审查，而是在寻找可能有助于找到此代码的工具或博客中的想法可能有有用的信息。

到目前为止，Google 和 Bing 还没有向我展示任何我不知道或已经尝试过的东西。

[编辑 - 从下面的讨论中添加详细信息]

无条件 cmets <!--[if IE]...
当我在控制台日志中看到此错误时，页面已完全呈现。所以我看不到任何中间渲染。
为此使用 Fiddler。我已经确认服务器正在推送格式良好的 html
正在使用的框架：
- UI.Bootstrap，
- 推特引导，
- Angular.js，
- Angular.UI
- Angular.DragAndDrop
从 Fiddler 获取 HTML，并验证 HTML
- <body></body> only one pair
- 有一个带有<div class="container body-content"></div> 的div 不应影响此规则。
- 已验证没有打开标签，并且只有一个正文打开和关闭标签。

感谢 jascher 帮助介绍基础知识。

【问题讨论】：

标签： html angularjs twitter-bootstrap internet-explorer drag-and-drop

【解决方案1】：

检查您的页面上是否有条件 cmets。

喜欢 自 IE10 起，它们在 IE 中不受支持。

http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

【讨论】：

无条件 cmets。
没有来源很难猜测 :)
另一种猜测 - 如果您在页面构建期间获得 HTML1521，则意味着

【解决方案2】：

我知道 7 年过去了，但我今天遇到了同样的问题，所以我分享我的答案。

我认为您的 head 部分中有一些无效的 html 标记，该标记被标识为开始正文部分，当实际正文部分开始时，IE11 将其识别为第二个标记，这就是为什么会有更多的正文警告。这是一个非常简单（但无效）的 HTML 文件，它可以轻松地演示您和我也面临的情况：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <p><title>My Title</title></p>
    <!--[if lt IE 9]><style type="text/css">.blue {color: blue;}</style><![endif]-->
</head>
<body>
    <H1 class="blue">It is blue when older than IE9</H1>
</body>
</html>

请查看标题片段周围头部中无效的段落 HTML 标记。

条件语句不是上面提到的Allaksai的问题。

如果从head部分删除无效的段落标签，更多的body警告将消失。

使用 F12 按钮并使用浏览器进行检查，同时仔细查看 head 部分，并检查开发人员工具中的 DOM 布局选项卡。您会看到段落部分与 title 元素一起进入 DOM 正文部分。

当您使用具有默认移动支持的 bootsfaces 并将这样的视口元素放入 head 部分时，也会发生同样的事情：

<p><meta name="viewport" content="width=device-width, initial-scale=1" /></p>

这也是无效的......但这当然是另一个问题。

希望我的回答能有所帮助。

【讨论】：

该代码早已不复存在，因此我无法再次查看它。然而，我有足够多的人相信这是浏览器渲染问题，而不是我的代码。具体来说，因为这只是在 IE11 上，所以我遇到了这个问题。
FTR：我 7 年前做的很多事情早已不复存在，因为我的大部分 UX 工作都是在 Angular 10+ 中完成的。干杯！
感谢布赖恩的反馈。是的，软件开发的 7 年相当长。

【解决方案3】：

我在那个项目上不再支持 IE11。客户被引导至 Chrome 和 Firefox，以及后来的 Edge。

【讨论】：