:active bei untergeordneten Elementen (IE)

[Pryos.org]

Hallo,

ich habe in einer HTML Seite einen Link der wie ein Button aussehen soll:

<a href="#" class="button"><span>Hier steht der Text.</span></a>

Mit etwas HTML kommt dann auch eine Hintergrundgrafik zum Einsatz, die entsprechend positioniert wird. Beim Mouseover schiebt der die Grafik etwas nach oben und zeigt den zweiten Teil der Grafik an. Beim Klick kommt der dritte Teil zum Einsatz.

a.button {  
	display: inline-block;display: -moz-inline-box; height:22px;  
	background: url(/img/n-button.png) no-repeat right 0px;  
	margin:0 0 0 12px;  
	padding: 0 20px 0 0;  
	color: white;  
	text-decoration:none;  
}  
* html a.button  { display: inline;}  
*:first-child+html a.button { display: inline;}  
a.button span{  
	display: inline-block;display: -moz-inline-box;  
	height:22px; line-height: 22px;  
	background: url(/img/n-button.png) no-repeat left 0px;  
	margin:0 0 0 -12px; padding: 0 0 0 12px;  
}  
* html a.button span{ display: inline;}  
*:first-child+html a.button span{ display: inline;}  
a.button:hover, a.button:focus {background-position: right -22px;}  
a.button:hover span, a.button:focus span{background-position: left -22px;}  
a.button:active {background-position: right -44px;}  
a.button:active span{background-position: left -44px;}

Soweit so gut. Es  wird in allen "richtigen" Browsern auch korrekt angezeigt und funktioniert wie gewünscht.
Nur beim IE funktioniert es nicht wie es soll. Der Hover wird noch dargestellt, jedoch :active nicht.

Inzwischen habe ich herausgefunden das nur das oberste Element davon beeinflusst wird. Quasi "a.button span:active" funktioniert. Jedoch kann ich so nicht das a Element selbst beeinflussen.

Gibt es eine IE Lösung welche den "click" an das untere Element weiterleitet oder womit ich das untere Element beeinflussen kann?