如何找出我的浏览器选择忽略的无效 HTML？答案

【问题标题】：How do I find out invalid HTML that my browser chose to ignore?如何找出我的浏览器选择忽略的无效 HTML？
【发布时间】：2014-06-10 05:25:14
【问题描述】：

例如，在下面的 HTML ...

<form name="outerform">
  <input type="text" name="outer1"/>
  <input type="text" name="outer2"/>

  <div>
    <form name="innerform" method="post" action="#">
      <input type="text" name="inner1"/>
    </form>
  </div>
</form>

Firefox 将简单地丢弃 innerform <form> 标签，因为表单不能嵌套。

我在修补一些遗留代码时遇到了这个问题。有人放置了一个<form> 标签，几乎覆盖了整个body 内容。当我添加我自己的、更本地化的<form> 时，Firefox 去掉了内部标签，我的提交将转到外部表单。由于我正在做一些 jQuery 处理来创建我的提交 URL，我认为这是我的错误。在 Firebug 的 HTML 选项卡中查看呈现的 HTML 后，我意识到了这个问题。

如果浏览器或 Firebug 有一个用于“忽略 HTML”的选项卡，或者一些这样的方法，我会立即选择它。我不能简单地做一个 View-Source 并将其粘贴到 W3C 的基于 Web 的验证服务中，原因如下：

出于安全原因，我使用的开发计算机未连接到公共 Internet。
Firebug 的 HTML 选项卡显示呈现的 HTML，因此无效的 HTML 标记已被删除。

最后，编辑器 (Eclipse) 通常是我捕获此类错误的地方。但是我们使用了很多包含的文件和 Tiles 框架，因此您一次只能看到最终 HTML 页面的一个片段。

【问题讨论】：

Firefox 的视图源不显示渲染的 HTML；如果我放一些类似你的测试用例的东西，它会同时显示<form> 标签...
谢谢，我已在问题中更正了这一点。我的意思是 Firebug 的 HTML 选项卡，而不是查看源代码。

标签： html internet-explorer firefox browser firebug

【解决方案1】：

我找到了我的解决方案。感谢 Boris Zbarsky 的评论为我指明了正确的方向。视图源显示了下载的 HTML，但 Firebug DOM 检查器显示了渲染的 HTML（我在问题中弄错了这两个）。解决方案：

查看源代码并保存文件（文件 1）
打开 Firebug 的 DOM 检查器，右键单击顶级元素 <html>，复制 HTML 并保存到文件（文件 2）
使用差异工具比较两个文件。在图形差异工具中，文件 2 将显示浏览器忽略/删除 HTML 的间隙。

重新格式化这两个文件中的 HTML 可能会使比较更容易。

【讨论】：

【解决方案2】：

如果它无效，则无法知道浏览器将如何反应；因此，在an HTML Validator 中列为损坏的任何内容都应该被修复。

您可以离线验证 HTML；例如，我使用了一个 plugin for Coda 来离线验证 HTML。

【讨论】：

【解决方案3】：

如果您有 wget 工具，那么获取服务器生成的 HTML 的精确副本非常实用。即使是“查看源代码”功能也并不总是能准确地显示下载的内容（也许是现在，但我花了几个小时查看那里的“有效”代码，而当时服务器没有正确执行。）

您可以从 SourceForge.net 上的 mingw 工具获取用于 MS-Windows 的 wget。在 Linux 下，它可能已经安装，如果不只是在您的存储库中搜索它。

【讨论】：