Estou projetando um painel clicável para um aplicativo html que contém vários elementos e imagens de texto.

Pelo que entendi isso geralmente é feito com um div. Algo assim:

<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
    <img ...>
</div>

Com um pouco de estilo e ligando o evento clique isso funciona bem, mas eu estou tendo problema com o estilo do estado ativo:

.myButton {
    cursor:pointer;
}
    .myButton:active{
        -ms-transition-duration: 0.2s;
        -ms-transform: scale(0.95);
    }

Neste exemplo, estou tentando fazer uma animação css (apenas IE), mas isso poderia ser realmente qualquer coisa. O problema é que o estado ativo só funciona quando clico no div, mas não funciona quando clico em qualquer um dos filhos do div.

Aqui está um violino JS para mostrar o cenário:

http://jsfiddle.net/S9JrH/13/

ATUALIZAR: Agradecemos a David Thomas por apontar um erro de digitação no código e confirmar que isso funciona no Chrome.

Infelizmente, no IE10 isso só funciona quando você clica na parte inferior da div, longe do texto.

Alguém sabe como fazer isso funcionar corretamente no IE10?