28172 sujets

CSS et mise en forme, CSS3

[resolu] Pb IE 8 padding-top et height : height non prise en compte

Bonjour,

je commence à tester la compatibilité IE 8 des sites et ai trouvé un bug assez méchant.
Il arrive lorsque l'on fixe la taille d'un élément de type bloc et que l'on met un padding-top : la hauteur n'est pas prise en compte.

JE vous laisse essayer :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
			div {
				padding-top: 100px;
				height: 50px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet</div>
	</body>
</html>


Quelqu'un a-t-il déjà rencontré ce problème ?
J'ai essayé avec les balises h1, div, ul, li et fieldset, le problème vient bien des éléments de type bloc.

PS : j'ai essayé avec min-height, et en forçant le display block et le problème est le même.
Si l'on rajoute un reset CSS, le problème reste aussi.

Merci d'avance
Modifié par bz_spi (23 Apr 2009 - 14:44)
Administrateur
Hello,

Il faudrait avoir un exemple en ligne ou une illustration pour mieux comprendre ce que tu veux dire par "la hauteur n'est pas prise en compte.".

Ton élément ne fait pas 150px de haut, sur l'écran ?
Raphael a écrit :
Hello,

Il faudrait avoir un exemple en ligne ou une illustration pour mieux comprendre ce que tu veux dire par "la hauteur n'est pas prise en compte.".

Ton élément ne fait pas 150px de haut, sur l'écran ?


Exactement, l'élément ne fait pas 150px, le bloc s'arrête en bas du texte, comme si aucune hauteur n'avait été fixée en CSS.

Rendu IE 8 :


Rendu autres navigateurs (IE 6, IE 7, Safari Win, FF 3, Opera) :
Modifié par bz_spi (10 Mar 2013 - 19:16)
J'ai remarqué autre chose (je l'avais aperçu avant, mais sans savoir comment le reproduire).

Si je mets l'url de ma page dans IE 8 et que j'appuie sur "entrée", la page s'affiche correctement. Par contre, si j'appuie sur le bouton de rafraichissement ou F5, le rendu part de nouveau en sucette avec le bug ci dessus. Smiley biggol

J'ai réussi à bidouiller avec line-height dans mon cas puisque je n'ai qu'une seule ligne dans mon élément, mais c'est tout de même extrêmement gênant.
Salut,

Sur mon IE8, j'ai la même chose que sur ta capture de Firefox (même en rechargeant 15 fois la page). Utilises-tu une version native de IE8 ou une version standalone (à la xenocode, par exemple) ?
j'utilise une version native de IE 8.

Ce n'est pas le seul bug que j'ai rencontré et qui varie en rechargeant la page.

Je viens de faire le test sur un autre IE 8 et en effet, le bug n'apparait pas. Smiley eek

Bon, je crois que je viens de perdre une demi journée Smiley biggrin

Merci à tous en tout cas.
Bonjour,

S'assurer, à tout hasard, qu'IE8 interprète bien les pages «locales» (domaine piroellel sur ta capture) en mode natif IE8, et pas en mode de compatibilité. Par défaut, c'est le mode de compatibilité qui est utilisé pour les fichiers et réseaux locaux.
Modifié par Florent V. (23 Apr 2009 - 15:14)
Sujet clos
Aller à