html - 查看显示不同输出的源代码和 Chrome 开发人员工具

Question

在 Chrome 和 Firefox 中查看页面时，它们会显示一个非常小的 h1 标题，并且它会像链接一样改变颜色。生成所有内容的模板看起来应该是这样的。在诊断问题时，当我查看源代码时，相关代码部分如下所示：

<div class="page-heading">
    <h1>Title Here</h1>
</div>

但是，当我在 Chrome 的开发者工具中查看它时，它会抛出无关的格式错误的锚标签，这显然是导致悬停行为的原因。这是开发工具的样子：

<div class="page-heading">
<h1>
    <a style="font-family: arial; font-size: 9px" <="" a="">Title Here</a>
</h1>                
</div>

此外，在查看站点的本地副本时，开发工具中显示的输出与查看源相同，并且它们都在本地正确呈现。

奇怪的是，所有版本的 IE 都能正确渲染它。Chrome 和 Firefox 的当前版本都以奇怪的方式呈现它。最初我认为这可能是用户代理样式表问题，但如果 CSS 没有问题，那就是 HTML 格式错误。

score 8 · Accepted Answer

在 Chrome 的开发者工具中查看时，结果是 javascript 修改后的结果。 （这意味着您可以看到由 javascript 动态添加的内容）

当您将其视为视图源时，它是原始 html 源。

1 回答 1