查看显示不同输出的来源和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。

Answer 1

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

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