| |
| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
admin
Spécial
Inscrit le: 01 Juin 2006
Messages: 24
|
 Posté le: Mer Oct 25, 2006 2:59 pm Sujet du message: Gérer la compatibilité entre IE et Firefox |
 |
|
Lorsqu'on travaille avec les css et div on a souvent des mauvaises surprises sur l'affichage entre IE et Firefox.
Voici quelques solutions pour y remedier :
Supprimer dès le debut les marges reservées par les deux navigateurs:
| Citation: | | *{margin:0;padding:0} |
Parfois IE double la marge sur les blocs en position float, la solution est de convertir ce bloc en élément en ligne (inline) et mettre supprimer les marges en mettant au debut du css le code en haut :
| Citation: | | #mondiv{display:inline;} |
Les blocs en position float (left ou right) ont souvent tendance à sortir de son conteneur sous firefox quand ces blocs ont des hauteurs importantes
alors que sous IE tout se passe normalement :
il y a plusieurs posssibilités de supprimer ce lancune :
soit mettre un <hr /> en bas du bloc en position en float et l'appliquer ce CSS :
| Citation: | | hr {clear:both; visibility:hidden} |
- La propriété "clear" permet de gérer le contenu autour des éléments flottants et peut "pousser" un conteneur pour intégrer les éléments en float.
- visibility cache la règle <hr />
Mais quand on applique cette technique ce fameux <hr /> laisse encore des marges externes sous IE et cela peut affecter d'autres éléments ou l'affichage n'est pas identique sur les deux navigateurs :
pour supprimer les mariges il faut :
- transformer l'élément en block:- l'imposer une marge négative de 7px (<hr /> resèrve une marge padding-top et bottom de 7px)
hr{display:block; margin:-7px 0; padding:0;font-size:1px;line-height:1px;}
Des blocs sur IE ont des hauteurs plus grandes que prevues :
De façon générale, Internet Explorer affecte une hauteur minimale aux éléments.
Cette hauteur est celle de la taille du texte par défaut, la hauteur de ligne "line-height" pour être précis (aux alentours de 13-20px si rien n'est spécifié)
En clair, si la taille de texte par défaut est supérieure à la hauteur d'un élément, cet élément sera "forcé" à avoir cette hauteur minimale… même si l'élément ne contient aucun texte !
Les solutions évoquées ci-dessous règlent généralement ce problème.
| Citation: | - font-size: 1px sur l'élément (la valeur "0" ne fonctionnant pas sur certains navigateurs)
- line-height: 1px sur l'élément |
Problème sur les puces <ul> ou <ol>
Firefox applique par défaut un padding-left de 40px aux <ul> et y place les puces, mais IE se serve d'un margin-left de 40px
| Citation: | | solution:- spécifier à la fois les valeurs de margin et padding pour les éléments <ul> et <ol>, en mettant l'un des deux à zéro et l'autre à la valeur d'espacemtn souhaitée. |
Espace indésirable sous les images
| Citation: | solutions :
img{display:block; font-size:1px;line-height:1px;vertical-align:middle;} |
|
|
| Revenir en haut de page |
|
 |
mouarf
Medaille 2
Inscrit le: 10 Juil 2006
Messages: 24
Localisation: Montpellier - France
|
| Posté le: Mar Oct 31, 2006 9:37 am Sujet du message: |
|
|
Merci pour ces informations, en effet la mise en page reste toujours un problème compte tenu du caractère aléatoire du navigateur utilisé par le visiteur.
Vous évoquez le cas de Internet Explorer et de Firefox :
Qu'en est il des autres navigateurs qui existent Netscape, Opéra, Safari ... 
Est ce que la nouvelle version de Firefox résout certains problèmes
Via le CSS on peut directement mettre en page la version imprimable d'un site, on peut également prévoir deux version d'une page (avec ou sans JS) serait-il envisageable de faire 2 pages CSS une pour IE et l'autre pour MF Cela représenterait-il une masse de travail équivalente aux solutions à mettre en place pour assurer la "portabilité" de la page
_________________
quand il ya une erreur sur un ordinateur, l'origine se situe entre la chaise et le clavier
 |
|
| Revenir en haut de page |
|
|
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
|
| |
|
FAQ
Rechercher
Liste des Membres
Groupes d'utilisateurs
Profil
S'enregistrer
Connexion
Se connecter pour vérifier ses messages privés
