View Source and Chrome Developer Tools showing different output
- by patricksweeney
I have a page located here. Viewing it in Chrome and Firefox show a really small h1 title, and also it changes color as if it is a link.
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. 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. The current version of both Chrome and Firefox both render it weirdly. 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.
