IE6 decalage ligne avec exposant

**pop_up** · 12/03/2008, 10h03

Bonjour,

Sous IE6, j'ai un problème avec les lignes qui possèdent un champ en exposant car cela les décale vers le bas et les fait donc se superposer un peu avec celle du dessous.

Sous firefox l'exposant ne pose pas de problème et l'affichage est OK.

Voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<style>
	ul {
		font-size: 0.75em;                                                          /* 12px */
		line-height: 1.2em;
	}
	li {
		padding: 0 0 0.4em 0;
	}
	</style>
</head>
 
<body>
<ul>
	<li>
		<a href="qsdfsqdf">bla bla bla bla bla</a><br>
		<em>edit edit ...</em>
	</li>
	<li>
		<a href="qsdfsqdf">bla bla bla bla bla</a><br>
		<em>edit edit ...</em>
	</li>
	<li>
		<a href="qsdfsqdf">bla bla bla bla bla</a><br>
		<em>edit edit ...</em>
	</li>
	<li>
		<a href="qsdfsqdf">bla bla 1<sup>er</sup> bla bla bla</a><br>
		<em>edit edit ...</em>
	</li>
</ul>
</body>
</html>

Comment corriger ce comportement ?
Est ce à corriger dans une feuille conditionnelle pour IE<7 ?

merci

**Erwan31** · 12/03/2008, 13h49

Bonjour Pop-up,
c'est dû au vertical-align:super du sup, la valeur baseline résout le décalage mais déplace l'exposant vers le bas assez logiquement.
Tu dois donc attribuer un line-height de 2em à ton sup.

Toi qui a l'air de bien vouloir faire les choses, il te manque un certain nombres de lignes/attribut dans ton head, alors si ça t'intéresse...

En revanche, oublies ça: application/xhtml+xml, ça ne représente aucun intéret actuellement puisque IE6 et 7 n'interprètent pas ce type mime.
Sers ton doc en text/html.

**pop_up** · 12/03/2008, 13h59

pourquoi 2em spécialement ?
tu as ajouté le font-size: 0.75em; et le line-height: 1.2em; du ul ?

Je cherchait un moyen de le faire de façon générique car des balises sup, j'en ai un peut partout et les font-size varient.

Pour le header, je n'ai mis ici qu'un extrait de code allégé pour que ce soit plus facile à tester. Sinon actuellement mon haeder ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!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="application/xhtml+xml; charset=iso-8859-1" />
    <title>site accessible</title>
    <link type="text/css" href="./styles/main.css" rel="stylesheet" media="screen" />
    <!--[if lt IE 7]>
        <link type="text/css" href="./styles/ie.css" rel="stylesheet" media="screen" />
    <![endif]-->
    <link type="text/css" href="./styles/print.css" rel="stylesheet" media="print" />
        <link rel="shortcut icon" type="image/ico" href="./favicon.ico" />
</head>
<body>

voila. la si tu vois des choses manquantes, je suis preneur

merci

**Erwan31** · 12/03/2008, 14h52

Oublies le type mime application/xhtml+xml, ça ne représente aucun intéret actuellement puisque IE6 et 7 n'interprètent pas ce type mime
et ça n'est de toute façon obligatoire qu'en XHTML1.1. Sers ton doc en text/html.

Le 2em n'est pas une règle, c'est juste ce qui permet de repousser la ligne de dessous suffisamment vers le bas puisque sous IE le placement de ce texte dépend de la boîte en-ligne (font-size+interlignes) du sup.
Mais comme la valeur de line-height est exprimée en EM ça devrait en principe
fonctionner pour tous les corps.

Pour le meta c'est plus propre mais il manque certaine choses (dessous title)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<meta name="description" content="" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="start" title="Accueil" href="/" />
<link rel="help" title="Page d'aide" href="/aide.php" />
<link rel="contents" title="Plan du site" href="/plan.php" />
<link rel="author" title="Auteur" href="http://..." />
<link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" href="logo.png" />

le description pour afficher ce texte sous le résultat en gras que fournissent les moteur de recherche comme Google.

Les liens relatif (<link rel="...) pour des navigateurs comme Opera qui mettent net à disposition une nav standardisée intégrée au navigateur...
Désolé je préciserai un peu tout ça plus tard

IE6 decalage ligne avec exposant

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager