title: Make a whole div clickable with working :active css rule in IE10
body: <p>I'm designing a clickable panel for an html app which contains multiple text elements and images.</p>
  
  <p>From what I understand this is generally done with a div. Something like this:</p>
  
  <pre><code>&lt;div class="myButton"&gt;
      &lt;h2&gt;Text&lt;/h2&gt;
      &lt;h3&gt;Some more text&lt;/h3&gt;
      &lt;img ...&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With a bit of styling and hooking up the click event this works fine but I am having problem with styling the active state:</p>
  
  <pre><code>.myButton {
      cursor:pointer;
  }
      .myButton:active{
          -ms-transition-duration: 0.2s;
          -ms-transform: scale(0.95);
      }
  </code></pre>
  
  <p>In this example I'm trying to do a css animation (IE only) but this could really be anything.
  The problem is that the active state only works when I click on the div but doesn't work when I click on any of the children of the div.</p>
  
  <p>Here is a JS Fiddle to show the scenario:</p>
  
  <p><a href="http://jsfiddle.net/S9JrH/13/" rel="noreferrer">http://jsfiddle.net/S9JrH/13/</a></p>
  
  <p><strong>UPDATE:</strong> Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.</p>
  
  <p>Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.</p>
  
  <p>Does anyone know how to get this working properly in IE10?</p>