title: <a> with an inner <span> not triggering :active state in IE 8
body: <p>I want to style the <code>:active</code> state of a button that is represented by an <code>&lt;a&gt;</code> tag. The <code>&lt;a&gt;</code> tag has an inner <code>&lt;span&gt;</code> (beacuse I want to add an icon to this button).</p>
  
  <p>I notice the <code>:active</code> state is triggered properly in everything but Internet Explorer 8. In IE 8, it appears that the area around the <code>&lt;span&gt;</code> (the <code>&lt;a&gt;</code>’s padding) triggers the <code>:active</code> state, but when clicking directly on the text within the <code>&lt;span&gt;</code>, the <code>:active</code> state is not triggered.</p>
  
  <p>Is there a way to fix this without resorting to Javascript?</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;a class="button" href="#"&gt;
   &lt;span&gt;Add a link&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>a.button { some styles }
  a.button:active { some other styles }
  </code></pre>