Question

Problem

I am writing a web page where the user can click on part of an image to trigger a Javascript event. However, I found out that if I put an absolutely-positioned anchor(a) / button(input type=button) on an image(img), the user cannot click it in IE (only), even if it is on top of the image.

Demo

<style type="text/css">
.MyDiv
{
    position:relative;
    left:0px;
    top:0px;
    width:275px;
    height:95px;
}

.MyDiv .MyImageDiv
{
    position:absolute;
    left:0px;
    top:0px;
    width:275px;
    height:95px;
    background-image:url('https://www.google.com/images/srpr/logo3w.png');
}

.MyDiv .MyButton
{
    position:absolute;
    left:162px;
    top:20px;
    width:53px;
    height:80px;

    display:inline-block;    /* Added based on @Zeta's comment */

    background-color:transparent;
/*    background-color:black;opacity:0.5;*/
    border:0px;
    cursor:pointer;
}
</style>

<!-- Button on image: cannot click in IE. Why? -->
<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>

<!-- Anchor on image: cannot click in IE. Why? -->
<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"></a>
</div>

<hr/>

<!-- Button on div with background-image: no problem -->
<div class='MyDiv'>
    <div class='MyImageDiv'></div>
    <input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>

<!-- Anchor on div with background-image: no problem -->
<div class='MyDiv'>
    <div class='MyImageDiv'></div>
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"></a>
</div>

Live Demo

To test, click on small letter g in

• Demo1 (original)
• Demo2 (full, w3c validated)
• Demo3 (full, w3c validated, with text-indent as suggested by @Sparky672).

EDIT (2012-12-05): Migrated demos to jsfiddle.

• Demo4@jsfiddle
• Demo5@jsfiddle (with text-indent as suggested by @Sparky672).

Details

I can click and trigger the bottom two alerts in all browsers; however, the first two CANNOT be triggered in IE (see test results below). It is ok because I can always remind myself not to write in that way, but is there a sensible explanation as for why this is happening?

P.S. I tried using z-index on the anchor / button, but it didn’t help.

EDIT (2012-06-01): Tried using display:block / display:inline-block on the anchor / button (as per @Zeta’s comment), but it didn’t help.

I also tried using IE9’s Developer Tools (F12) to try to debug the page. If I use the arrow tool (Ctrl+B) to select the anchor / button, it cannot be selected; but if I highlight the anchor / button element in the HTML of the Developer Tools, it correctly shows the position and size of the anchor / button. Strange enough.

Test results

+-------------------------------------------------------+---------------------------------------+
|                                                       | Can click on anchor / button on image |
+-------------------------------------------------------+---------------------------------------+
| IE 6.0.2900.2180.xpsp_sp2_gdr.100216-1441, on Windows | **NO**                                |
| IE 9.0.8112.16421, on Windows                         | **NO**                                |
| Opera 11.64, on Windows                               | Yes                                   |
| Opera 12.00, on Windows                               | Yes                                   |
| Opera 12.02, on Windows                               | Yes                                   |
| Opera 12.11, on Windows                               | Yes                                   |
| Opera 11.64, on Mac                                   | Yes                                   |
| Opera 12.00, on Mac                                   | Yes                                   |
| Opera Mini 7.0.4, on iPhone                           | Yes                                   |
| Firefox 12.0, on Windows                              | Yes                                   |
| Firefox 14.0.1, on Windows                            | Yes                                   |
| Firefox 15.0.1, on Windows                            | Yes                                   |
| Firefox 13.0, on Mac                                  | Yes                                   |
| Chrome 19.0.1084.52m, on Windows                      | Yes                                   |
| Chrome 22.0.1229.79 m, on Windows                     | Yes                                   |
| Chrome 23.0.1271.95 m, on Windows                     | Yes                                   |
| Chrome 19.0.1084.54, on Mac                           | Yes                                   |
| Chrome 21.0.1180.82, on iPhone                        | Yes                                   |
| Safari 5.1.5, on Windows                              | Yes                                   |
| Safari 5.1.7 (7534.57.2), on Windows                  | Yes                                   |
| Safari 5.1.7 (7534.57.2), on Mac                      | Yes                                   |
| Safari, on iOS 4.3.5                                  | Yes                                   |
| Browser, on Android 3.1                               | Yes                                   |
+-------------------------------------------------------+---------------------------------------+

Answer 1

Conclusion

Here’s my conclusion after a lot more research.

In this page, the author experienced the same behaviour in IE8.

In this SO question (1663919), the author experienced the same behaviour in IE7.

In these SO questions (1075684, 4639921), the authors have the same problems in IE in slightly different but similar scenarios.

It seems that the spec does not mention anything about that, but since it only happens in IE and it only happens when the anchor / button is put on top of an image (which isn’t quite anyone would expect), I would say this is just a bug in IE.

Workarounds

Use any one below to workaround the problem:

1. Do not put an anchor / button on an image. Instead, put it on a div with a CSS background-image (as stated in the Question).

2. Set the following CSS property on the anchor / button, which makes it clickable again in IE (as stated here).

   background-image:url(about:blank)