Problème avec :first-letter sous Internet Explorer

Logiciel & apps Programmation
1

Bonjour,

Je suis en train de construire un site pour une nouvelle romancière et je coince sur les lettrines (cette lettre du premier mot d’un nouveau paragraphe qui prend deux ou trois lignes).
Sur Firefox, tout sort correctement, en revanche sous Internet Explorer 8 et 9, il y a un décalage vers le bas que je n’arrive pas à résoudre.

Le sélecteur CSS est ici :

.lettrine:first-letter {
float: left;
padding: 0.06em 0.1em 0em 0.1em;
-moz-box-shadow: -0.1em 0.1em 0.05em rgba(255,255,255,0.2);
-webkit-box-shadow: -0.1em 0.1em 0.05em rgba(255,255,255,0.2);
-o-box-shadow: -0.1em 0.1em 0.05em rgba(255,255,255,0.2);
box-shadow: -0.1em 0.1em 0.05em rgba(255,255,255,0.2);
behavior: url(PIE.htc);
vertical-align: 1em;
font-weight: bold;
font-size: 3em;
color: #666;
}

.ie .lettrine:first-letter {
margin-right: 0.6em;
} /* J’ai dû rajouter ce sélecteur uniquement pour IE */

Une image vaut mieux qu’un long discours. Cette adresse vers le site en construction (Aila et la magie des fées) permet de comparer IE versus FF (le problème en en bas de la colonne de gauche).
La parution est pour le mois de février et il faut que je me dépêche…

Merci d’avance.
Didier

2

Essaye de coller un clear: both; sur .lettrine cela vient (probablement) du float: left. En tout cas, c’est le comportement que j’ai toujours connu avec float.
->

.lettrine {clear: both;}
3

Merci Sans-Nom,

La moitié du problème est résolu.
Il ne subsiste que le décalage vertical (le haut de la lettrine doit être sur la même ligne que le haut du texte (comme dans Firefox).
Les différents text-align que j’ai essayé n’ont rien donné.

Encore une suggestion ?

4

Essaye de jouer avec line-height. J’ai testé (F12 sous IE comme sous Fx avec Firebug…) et ça a l’air de faire quelque chose. Je pense que le line-height par défaut est relatif à la taille de la police, donc vu que tu agrandis la police de la première lettre, tu as cet effet indésirable.

5

Excellente idée, je teste ce soir…
Merci.

6

C’était bien la bonne solution.
merci deux fois Sans-Nom pour ton aide claire, rapide et efficace.
Bonne soirée.