Problème avec IE9 et mon code html/CSS

[Airtux]

Bonsoir tout le monde,

Alors voilà j'ai écrit un petit code en html et CSS qui me permet de faire apparaître des "bout de pages" dans des iframes, il y a deux boutons quand je clique sur un des boutons la iframe s'affiche exactement par-dessus l'autre iframe. le problème c'est qui'il ne fonctionne pas sous IE9 en revanche sous Chrome et Firfox sa marche très bien ! Mai je dois vraiment le rendre compatible avec IE9 c'est pour quoi je demande votre lumière.

Alors voilà mon code: (version allégée)


La partie html:

<a href="#Bouton1" style="position:absolute; left:50px; top:50px; z-index:100;">Bouton1</a>

<a href="#Bouton2" style="position:absolute; left:110px; top:50px; z-index:100;">Bouton2</a>


<div id="outout">
<iframe id="Bouton1" height="180px" scrolling="no" src="http://www.page1.com" width="110px"></iframe></div>


<div id="outout">
<iframe id="Bouton2" height="180px" scrolling="no" src="http://www.page2.com" width="110px"></iframe></div>

Et la partie en CSS

#outout{
    position: absolute;   
    width: 855px;         
    height: 1200px;        
    overflow: hidden;

}
    
#Bouton1{
  	opacity:1;
  	position:absolute;	 
 	height: 1500px;
 	left: -165px;
	top: -197px;
	width: 1019px;
}

#Bouton1:target {
  	opacity:1;
  	z-index: 10;

}

#Bouton2{
  	opacity:1;
  	position:absolute;	 
 	height: 1500px;
 	left: -165px;
	top: -197px;
	width: 1019px;

}

#Bouton2:target {
  opacity:1;
  z-index: 10;
  
}

Voilà sous IE9 j'ai beau cliquer sur les boutons, l'iframe ne change pas alors que sous Chrome et Firefox sa marche bien, je ne sais pas d'ou viens le problème j'ai pourtant cherché... peut-être le z-index qui ne veux pas ce mettre au premier plan? peut-être que IE9 ne reconnais pas les "id" dans les iframes ?

En tout cas je serai reconnaissant à ceux qui voudront bien m'aider, Merci.
-----