[résolu]Problème d'adaptation avec ie9

Bonjour à tous !

Alors voilà, je viens de finir le site web de ma cliente, valide html et css, compatible avec ie7 et 8.
Sauf qu'elle m'a contacté car elle est passée sous ie9. Et boum, une erreur :
www.oec-translation.com
Mes titres ne s'affichent pas, sauf si on clique sur l'icone "problèmes de compatibilité".

Donc je voulais savoir si vous avez déjà eu des cas similaires, si vous avez quelques pistes?

Merci d'avance

un exemple d'un bout de code concerné par ce phénomène :

          <aside>
          <div class="aside-tail">
            <div class="aside-top">
              <div class="aside-bot">
                <div class="inner">
                  <div class="wrapper">
                    <article class="block-1">
                      <div class="indent"> <strong>Des besoins</strong>
                        <p>Vous avez besoin d'interprètes, de traducteurs ou de matériel pour mener à bien la traduction de votre conférence ou de vos documents...</p>
                      </div>
                    </article>
                    <article class="block-2">
                      <div class="indent-1"> <strong>Aux solutions</strong>
                        <p>Nous sommes là pour vous ! Notre équipe d'interprètes et de traducteurs sera heureuse de réaliser votre projet.</p>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="contact.php" id="aside-button">Contact</a>
	 </aside>

pour le css je ne vois pas ou chercher, je peux vous mettre celle de strong et d'indent, ce qui semble etre le plus logique :

aside {
	position: relative;
	width: 100%;
	padding: 0 0 43px 0;
}

	aside .aside-tail {
		background: url(../images/aside-tail.jpg) repeat-y 0% 0%;
	}

	aside .aside-top {
		background: url(../images/aside-top.jpg) no-repeat 50% 0%;
	}
	
	aside .aside-bot {
		background: url(../images/aside-bot.jpg) no-repeat 50% 100%;
		width: 100%;
	}
	
	aside .inner {
		padding: 39px 0 58px 0;
	}
	
	aside .block-1 {
		width: 480px;
	}
	
		aside .indent {
			padding: 0 36px 0 40px;
			text-align: right;
		}
	
	aside .block-2 {
		width: 480px;
	}
	
		aside .indent-1 {
			padding: 0 36px 0 36px;
		}
	
	aside strong {
		display: block;
		padding: 0 15px 12px 0;
		line-height: 1.3em;
		font-size: 4em;
		font-weight: 500;
		color: #fff;
	}
	
	aside b {
		display: block;
		padding: 0 0 12px 0;
		line-height: 1.3em;
		font-size: 4em;
		font-weight: 500;
		color: #fff;
	}
	
	aside p {
		padding: 0 0 20px 0;
		line-height: 20px;
		font-size: 1.25em;
		color: #fff;
	}

#aside-button {
	background: url(../images/aside-button.png) no-repeat 0% 0%;
	display: block;
	width: 175px;
	height: 83px;
	overflow: hidden;
	line-height: 74px;
	font-size: 3em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	position: absolute;
	left: 393px;
	bottom: 26px;
}

	#aside-button:hover {
		color: #fc817a;
	}

Modifié par nan0 (01 Apr 2011 - 20:12)

Salut,

Le fichier JS permettant de créer les nouveaux éléments HTML 5 dans le DOM d'IE est appelé par un commentaire conditionnel ciblant IE toutes versions confondues. Or, IE 9 apporte des améliorations en matière de support du HTML 5, si bien qu'il n'est plus nécessaire de créer les éléments HTML 5 dans le DOM pour cette dernière version du navigateur de Microsoft.

Par conséquent, corrige ton commentaire conditionnel comme suit :

<!--[if lte IE 8]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->

c'est corrigé, malheureusement aucune influence sur les titres..
J'ai beau chercher, aucun moyen. J'en viens même à penser que c'est un bug d'ie9...

J'éspère me tromper.

D'autres idées?

Le problème venait de cufon, le script permettant de créer de jolies polices.
Il faut le mettre à jour pour ie9, tout simplement.
Solution bête, mais des heures de réflexion !

Sujet résolu !