Blogger Problems With Custom HTML Template

How come I cannot link to comments or comment-form anchors in IE8?

Recently I found this issue in IE8. I have the following link at the top of a post:

<a href="#comment-form">Leave a Comment</a>

which when clicked is supposed to go to the comment form at the bottom. I learned of the anchor name in Layout -> Edit HTML -> Expand Widget Templates. In there I see the following:

<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>

In HTML you can create anchors like this so that you can allow users to jump to different places on the same page. This works perfectly in every browser except IE8.

The solution is to modify the following:

<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>

to

<a name='comment-form'><h4 id='comment-post-message'><data:postCommentMsg/></h4></a>

so that there's something between <a> and </a>. Basically the anchor CANNOT be empty and MUST enclose some text.

This fixes the problem.