[英]View Source and Chrome Developer Tools showing different output
When viewing a page in Chrome and Firefox, they show a really small h1 title, and also it changes color as if it is a link. 在Chrome和Firefox中查看页面时,它们会显示非常小的h1标题,并且颜色也会像链接一样更改。 The template that generates everything looks exactly how it should be.
生成所有内容的模板看起来完全正确。 When diagnosing the issue, the relevant section of code looks like this when I go to view source:
诊断问题时,当我查看源代码时,相关的代码部分如下所示:
<div class="page-heading">
<h1>Title Here</h1>
</div>
However, when I go to view it in Chrome's Developer tools, it is throwing in extraneous malformed anchor tags, which is obviously causing the hovering behavior. 但是,当我在Chrome的开发人员工具中查看它时,它会抛出多余的格式不正确的锚标记,这显然会导致悬停行为。 This is what it looks like to the dev tools:
这是开发工具的外观:
<div class="page-heading">
<h1>
<a style="font-family: arial; font-size: 9px" <="" a="">Title Here</a>
</h1>
</div>
In addition, when viewing a local copy of the site, the output shown in the dev tools is the same as viewing the source and they both render correctly locally. 另外,在查看站点的本地副本时,开发工具中显示的输出与查看源代码相同,并且它们都在本地正确呈现。
Oddly enough, all version of IE render it correctly. 奇怪的是,所有版本的IE都能正确呈现它。 The current version of both Chrome and Firefox both render it weirdly.
Chrome和Firefox的当前版本都怪异地渲染了它。 Initially I thought it may be a user agent stylesheet problem, but if anything the CSS is fine, it's the HTML that is malformed.
最初,我认为这可能是用户代理样式表问题,但是如果CSS没问题,那是HTML格式错误。
When you view it in Chrome's Developer tools, the result is after modified by javascript. 当您在Chrome的开发者工具中查看它时,结果将由javascript修改后。 (It means you could see contents added by javascript dynamically)
(这意味着您可以动态看到由javascript添加的内容)
When you view it as view source, it is the original html source. 当您将其作为查看源进行查看时,它就是原始的html源。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.