title: Cannot click a/button in front of img in IE6 or IE9
body: <h1>Problem</h1>
  
  <p>I am writing a web page where the user can <strong>click on part of an image to trigger a Javascript event</strong>. However, I found out that if I put an absolutely-positioned <strong>anchor</strong>(<code>a</code>) / <strong>button</strong>(<code>input type=button</code>) on an <strong>image</strong>(<code>img</code>), the user cannot click it in <strong>IE</strong> (only), even if it is on top of the image.</p>
  
  <h1>Demo</h1>
  
  <pre><code>&lt;style type="text/css"&gt;
  .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;
  }
  &lt;/style&gt;
  
  &lt;!-- Button on image: cannot click in IE. Why? --&gt;
  &lt;div class='MyDiv'&gt;
      &lt;img src='https://www.google.com/images/srpr/logo3w.png' /&gt;
      &lt;input type='button' class='MyButton' onClick="alert('You clicked g!');"/&gt;
  &lt;/div&gt;
  
  &lt;!-- Anchor on image: cannot click in IE. Why? --&gt;
  &lt;div class='MyDiv'&gt;
      &lt;img src='https://www.google.com/images/srpr/logo3w.png' /&gt;
      &lt;a href='#' class='MyButton' onClick="alert('You clicked g!');"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;hr/&gt;
  
  &lt;!-- Button on div with background-image: no problem --&gt;
  &lt;div class='MyDiv'&gt;
      &lt;div class='MyImageDiv'&gt;&lt;/div&gt;
      &lt;input type='button' class='MyButton' onClick="alert('You clicked g!');"/&gt;
  &lt;/div&gt;
  
  &lt;!-- Anchor on div with background-image: no problem --&gt;
  &lt;div class='MyDiv'&gt;
      &lt;div class='MyImageDiv'&gt;&lt;/div&gt;
      &lt;a href='#' class='MyButton' onClick="alert('You clicked g!');"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>Live Demo</h1>
  
  <p>To test, click on small letter <strong>g</strong> in</p>
  
  <p><strike></p>
  
  <ul>
  <li><a href="http://pang.phpfogapp.com/stackoverflow/10849511/demo.php" rel="nofollow">Demo1</a> (original)</li>
  <li><a href="http://pang.phpfogapp.com/stackoverflow/10849511/demo_w3c_validated.php" rel="nofollow">Demo2</a> (full, w3c validated)</li>
  <li><a href="http://pang.phpfogapp.com/stackoverflow/10849511/demo_w3c_validated_with_text_indent.php" rel="nofollow">Demo3</a> (full, w3c validated, with <code>text-indent</code> as suggested by @Sparky672).</li>
  </ul>
  
  <p></strike>
  EDIT (2012-12-05): Migrated demos to jsfiddle.</p>
  
  <ul>
  <li><a href="http://jsfiddle.net/XGcG5/1/" rel="nofollow">Demo4@jsfiddle</a></li>
  <li><a href="http://jsfiddle.net/XGcG5/2/" rel="nofollow">Demo5@jsfiddle</a> (with <code>text-indent</code> as suggested by @Sparky672).</li>
  </ul>
  
  <h1>Details</h1>
  
  <p>I can click and trigger the bottom two alerts in all browsers; however, <strong>the first two <em>CANNOT</em> be triggered in IE</strong> (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>
  
  <p>P.S. I tried using <code>z-index</code> on the anchor / button, but it didn't help.</p>
  
  <p>EDIT (2012-06-01): Tried using <code>display:block</code> / <code>display:inline-block</code> on the anchor / button (as per @Zeta's comment), but it didn't help.</p>
  
  <p>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.</p>
  
  <h1>Test results</h1>
  
  <pre><code>+-------------------------------------------------------+---------------------------------------+
  |                                                       | 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                                   |
  +-------------------------------------------------------+---------------------------------------+
  </code></pre>