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

时间:2014-07-31 20:06:06

标签: html5 angularjs twitter-bootstrap internet-explorer drag-and-drop

我一直在IE11控制台上收到此消息

  

HTML1514:额外"< body>"找到标签。只有一个"< body>"标签应该存在   每份文件。文件:登录,行:76,列:1

当我阅读HTML时,只有一个正文标记。我阅读了IE的1514消息,并且没有任何可能导致此问题的内容。

有没有一个很好的工具来试图找出IE真正抱怨的内容?我能想到的最好的是我加载的一个库可能在脚本中有一些东西,但即使这样,除非将它添加到dom中并删除它,否则它没有意义。

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

我还没有在Chrome或FF中看到过这种情况。如果我不支持IE,我不会担心这个消息。

我试图发布代码,但是为了公开曝光剥离IP已经打破了一切,所以我没有获得公共代码审查,而是寻找可能有助于找到这个的工具中的想法,或博客可能有有用的信息。

到目前为止,Google和Bing还没有向我展示任何我不了解或已经尝试过的内容。

[编辑 - 添加以下讨论的详细信息]

  • 无条件评论<!--[if IE]...
  • 当我在控制台日志中看到此错误时,页面将完全呈现。所以我没有看到任何中间渲染。
  • 使用Fiddler。我已经确认服务器正在推动形成良好的html
  • 正在使用的框架:
    • UI.Bootstrap,
    • Twitter Bootstrap,
    • Angular.js,
    • Angular.UI
    • Angular.DragAndDrop
  • 从Fiddler抓取HTML,并验证HTML
    • <body></body> only one pair
    • <div class="container body-content"></div>的div不应影响此规则。
    • 验证没有打开的标签,并且只有一个主体打开和关闭标签。

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

2 个答案:

答案 0 :(得分:0)

检查您的网页上是否有条件评论。

<!--[if IE]> ... <![endif]--> 自IE10以来,IE不支持它们。

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

答案 1 :(得分:0)

我知道 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部分的无效段落标签,more body警告就会消失。

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

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

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

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

无论如何希望我的回答能有所帮助。