:active in IEs

IE6,7 doesn't remove :active styles after mouse up, IE8, 9 doesn't apply :active if the target has child elements.

by gravof

HTML

<p>:active</p>
<ol class="active">
    <li><a href="###">&lt;a&gt;&lt;/a&gt;</a></li>
    <li><a href="###"><span>&lt;a&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;</span></a></li>
    <li><a href="###"><b>&lt;a&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;</b></a></li>
    <li><button>&lt;button&gt;&lt;/button&gt;</button></li>
    <li><button><span>&lt;button&gt;&lt;span&gt;&lt;/span&gt;&lt;/button&gt;</span></button></li>
    <li><button><b>&lt;button&gt;&lt;b&gt;&lt;/b&gt;&lt;/button&gt;</b></button></li>
    <li><p>&lt;p&gt;&lt;/p&gt;</p></li>
    <li><p><span>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;</span></p></li>
    <li><p><b>&lt;p&gt;&lt;b&gt;&lt;/b&gt;&lt;/p&gt;</b></p></li>
</ol>
<p>:focus</p>
<ol class="focus">
    <li><a href="###">&lt;a&gt;&lt;/a&gt;</a></li>
    <li><a href="###"><span>&lt;a&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;</span></a></li>
    <li><a href="###"><b>&lt;a&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;</b></a></li>
    <li><button>&lt;button&gt;&lt;/button&gt;</button></li>
    <li><button><span>&lt;button&gt;&lt;span&gt;&lt;/span&gt;&lt;/button&gt;</span></button></li>
    <li><button><b>&lt;button&gt;&lt;b&gt;&lt;/b&gt;&lt;/button&gt;</b></button></li>
    <li><p>&lt;p&gt;&lt;/p&gt;</p></li>
    <li><p><span>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;</span></p></li>
    <li><p><b>&lt;p&gt;&lt;b&gt;&lt;/b&gt;&lt;/p&gt;</b></p></li>
</ol>

CSS

.active a:active, .focus a:focus {
    color: red;
}
.active button:active, .focus button:focus {
    color: red;
}
.active p:active, .focus p:focus {
    color: red;
}
.active span:active, .focus span:focus {
    color: blue;
}