Cannot click a/button in front of img in IE6 or IE9

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?

PS 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) 

Answer 2

There is one thing that is confusing here

On the first two divs you use img before either input or a tags

<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <input type='button' class='MyButton' onClick="alert('You clicked g!');"/>
</div>

<div class='MyDiv'>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/></a>
</div>

On the other divs, it's just divs before the inputs. Any reason for this?

Try this putting the img inside the a tag.

<div class='MyDiv'>
    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a>

</div>

<div class='MyDiv'>

    <a href='#' class='MyButton' onClick="alert('You clicked g!');"/><img src='https://www.google.com/images/srpr/logo3w.png' /></a>
</div>