Problème de lettrine (Internet Explorer vs Firefox)

Problème de lettrine (Internet Explorer vs Firefox) - HTML/CSS - Programmation

Marsh Posté le 17-01-2012 à 18:58:59    

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 http://www.telecharger-ebook-roman [...] otour.html 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

Reply

Marsh Posté le 17-01-2012 à 18:58:59   

Reply

Marsh Posté le 18-01-2012 à 12:50:13    

Vous ne recherchez pas un webdesigner ?   [:raph0ux]

Reply

Marsh Posté le 18-01-2012 à 22:27:26    

Le code est là, mais le design [:tinostar]


---------------
Blablaté par Harko
Reply

Marsh Posté le 21-01-2012 à 11:26:03    

Merci aux webdesigners pour leurs avis...
 
J'ai enfin trouvé la réponse que je partage avec les amateurs de lettrines : pour toutes les versions d'IE (9 compris), il faut ajouter un float: left et un line-height: 0.8em (ou toute autre valeur qui permet de faire coïncider les hauts de ligne).
 
Bon week-end à tous.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed