[Résolu] Bug IE : Duplication de contenu

Bonjour,

J'ai déjà eu plusieurs fois ce bug que j'ai à chaque fois bricolé à l'arrache. Mais aujourd'hui, c'est fini !

Ce bug se produit sous IE 6 & 7.
En effet, IE duplique parfois au rendu à l'écran du contenu texte.
Par exemple, dans un code HTML :

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

IE affiche à l'écran :

a écrit :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
scing elit.

J'ai beau cherché d'où vient ce bug et essayé de trouver une réponse sur le web, je n'ai rien trouvé...

Quelqu'un a-t-il déjà eu ce bug ?
Quelqu'un a-t-il un piste pour résoudre ce bug ?

Merci d'avance.
Modifié par Shemu (23 Nov 2006 - 15:59)

IL faudrait que tu mettes une page en ligne, ou tout au moins en copier-coller le code HTML et CSS.

Comme ça à sec, c'est difficile de dire ce qui ne va pas, il faut du concret.

Et pis zut !
Voici la partie du HTML qui me pose problème :

<div>
	<ul class="onglets" id="encartmixteliens">
		<li style="width: 25%;"><a href="#" class="on">test 01</a></li>
		<li style="width: 25%;"><a href="#">test 02</a></li>
		<li style="width: 25%;"><a href="#">test 03</a></li>
		<li style="width: 25%;"><a href="#" class="last off">test 04</a></li>
	</ul>
	
	<div id="encartmixtecontent">
		<div id="encartmixtecontentfond"> </div>
		<a href="javascript:void(0);">
			<span class="pm_titre">éèàç Suspendisse volutpat urna in…</span>
			<span class="pm_soustitre">Donec massa ante, rutrum in, cursus porttitor, tempus sed, velit.…</span>
			<span class="pm_description">Praesent sit amet magna. Etiam lobortis purus id nisl. Etiam iaculis, nunc quis congue laoreet, leo massa tincidunt tellus, nec dapibus leo ligula at risus1.</span>
		</a>
	</div>
</div>

et le CSS :

ul.onglets {
	list-style:none;
	margin:0;
	padding:0;
	height:22px;
	background:url(../images/home/onglet.gif) 0 0 repeat-x;
}
ul.onglets li {
	float:left;
}
ul.onglets li a {
	height:16px !important;
	height:21px;
	padding:5px 5px 0 5px;
	font-size:.8em;
	color:#B2B2B2;
	text-align:center;
	text-decoration:none;
	border:0;
	border-right:1px solid #000;
	border-left:1px solid #818181;
}
ul.onglets li a.last {
	border-right:0;
}
ul.onglets li a.on,
ul.onglets li a.off:hover,
ul.onglets li a.on.last,
ul.onglets li a:hover {
	color:#FFF;
	background:url(../images/home/onglet_on.gif) 0 0 repeat-x !important;
	border-left:1px solid #D56E6E;
}
ul.onglets li a.off {
	color:#B2B2B2;
	background:none !important;
	border-left:1px solid #818181;
}

#encartmixte {
	float:left;
	margin:2px;
	padding:1px;
	border:3px solid #4E4C4D;
	background:#000;
	width:590px !important;
	width:596px;
}
#encartmixte a {
	display:block;
	color:#FFF;
	text-decoration:none;
}
#encartmixtecontent {
	position:relative;
	height:auto !important;
	height:85px;
}
#encartmixtecontentfond {
	position:absolute;
	left:0;
	bottom:0 !important;
	bottom:-1px;
	z-index:20;
	width:100%;
	height:85px !important;
	color:#FFF;
	background:#000;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity:0.6;
	opacity:0.6;
}
#encartmixtecontentfond.on {
	background:#FFF !important;
}
#encartmixtecontent a {
	height:197px;
}
#encartmixtecontent span {
	width:580px;
	position:absolute;
	z-index:30;
	padding:0 5px;
	color:#FFF;
	cursor:pointer;
}
#encartmixtecontent a.on span {
	color:#000 !important;
}
#encartmixtecontent .pm_titre {
	top:112px;
	font-size:1.9em;
	font-weight:bold;
}
#encartmixtecontent .pm_soustitre {
	top:137px;
	font-size:1.1em;
	font-weight:bold;
}
#encartmixtecontent .pm_description {
	top:151px;
	height:42px;
	padding-top:3px;
	font-size:.9em;
}

Cependant, séparement le code ne pose pas de problème.
or, ce qui est déroutant et que le problème ne se pose pas si je supprime ces codes du code.
bref, j'en perd un peu mon latin

Bonjour,

J'ai moi-même déjà rencontré le problème...
As-tu essayé avec la méthode présentée dans ce sujet

- [Résolu] IE duplique le dernier caractère d'un lien

a écrit :

pour des raisons de confidentialité je ne peux pas mettre le code source de ma page.

Rien ne t'oblige à mettre le texte exact : tu peux très bien le remplacer par du Lorem Ipsum, tant que la structure HTML est la même. Le bug serait sûrement le même parce qu'en général ce genre de subtilité vient du CSS.

Merci pour ces réponses

J'ai inséré :

<!--[if IE]><span style="display:none; !important">BUG IE Haslayout</span><![endif]-->

Cela fonctionne.

Mais, il s'avère que j'ai le problème à 2 endroits différents, cela fonctionne sur l'un mais pas sur l'autre.

Je crois que je vais casser qqchose.

Shemu a écrit :
Merci pour ces réponses

J'ai inséré :

<!--[if IE]><span style="display:none; !important">BUG IE Haslayout</span><![endif]-->

Cela fonctionne.

Mais, il s'avère que j'ai le problème à 2 endroits différents, cela fonctionne sur l'un mais pas sur l'autre.

Je crois que je vais casser qqchose.

Edit: Par contre, le bug est résolu sous IE7

J'ai résolu le bug en placant un width:100% sur l'élément qui était dupliqué.
Merci pour votre aide.