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:
- An empty named A tag or any empty element with an ID. Adding text inside the element allows for the link to work properly.
- 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.
One can solve this issue while keeping the exact same markup by styling the anchor with:
display:inline-block
I tested it, and it does indeed solve the problem as well. I wonder how easy it would be to target just the named anchors and not all links with a simple CSS rule without modifying the underlying HTML to add a class or id.
For me, simply using more meaningful elements with content and an ID makes more sense and is harder to mess up than remembering that antiquated browsers that I can’t even run properly on my OS take issue with certain markup/style combos.
Whatever floats your boat. Puts a wind in your sail. Gets the monkey off of your back. Etc.
[...] anchors on the screen at coordinates 0,0 probably because the elements were empty. Thanks to this comment, it’s as simple as adding the CSS display: inline-block to the named anchor elements. The [...]