I recently ran into an interesting situation where clicking a link to a named anchor (a link such as #top linking to <a name="top"> or <div id="top">) failed in Internet Explorer 8. Strangely, it worked properly in every other browser I tested (Firefox, Chrome, Opera, and Safari) and it worked properly on other tested versions of IE (6, 7, and 9). It was just Internet Explorer 8 that was broken.

I created a very simple example page that shows this bug. The important elements are the empty named A tag and the container with the overflow:hidden rule. The rest of the content and the width is simply to allow enough height to show the functionality or lack thereof of the link.

So the key elements of this bug are:

  1. An empty named A tag or any empty element with an ID. Adding text inside the element allows for the link to work properly.
  2. A container with overflow:hidden around the link, element that is linked to, or both. I tested removing either the link or the element linked to from the div in the example, and IE 8 still failed to allow the link to function in both cases.

Given that the overflow: hidden rule could be very important or useful for the design, the solution to this issue is very simple. Either you add text to the empty element or remove the empty element and add the removed name/id to an element that does have content. Since adding text is probably not what you want, simply moving the anchor point to another element will probably do what you want and have very little impact on the functionality.

For example, if you have the following:

<a name="purchase"></a>
<h3>Purchase</h3>

Change it to:

<h3 id="purchase">Purchase</h3>

It will do the same thing and avoid this annoying IE 8 issue.

For those interested, the filler content was generated with the great Gangsta Lorem Ipsum.