Mardi 15 novembre 2005
2
15
/11
/Nov
/2005
00:00
LISTE DE BOUGS CSS SELON LES NAVIGATEURS ET SOLUTIONS
INTRODUCTION et Ressources Utiles
IE adapte les TAILLES HORIZONTALES DES DIVS
MARGE DOUBLE pour les Floats dans IE
3 PX à coté d'un DIV FLOAT dansIE
Menu DHTML qui passe derrière les select dans IE
INTRODUCTION et Ressources Utiles
Les hacks qui permettent écrire des régles CSS différentes pour chaque navigateur. A voir sur www.ultra-fluide.com
Haut
Quand Explorer adapte les TAILLES HORIZONTALES DES DIVS comme il veut
Le problème
Nous avons créé une page avec des divs. Ces divs ont une largeur fixe. Cette largeur est respectée dans tous les navigateurs sauf dans IE qui adapte la largeur selon le contenu. C'est à dire, s'il y a un mot trop long, Explorer ne pourra pas le couper. Il adaptera la taille du div au mot et cela decalera toute la page.
Voici ce qu'on veut faire, et qu'on réussi à afficher correctement dans tous les navigateurs sauf IE
Et voici ce qu'Internet Explorer fait avec notre page, juste parce que notre colonne contient un mot trop long
La solution
1. On peut prévoir que ce qui depasse la largeur de la colonne ne soit pas affiché. On perdrait cette information là. Ceci ce fait avec :
overflow:hidden
width: npx; (n étant un numéro)
Cet overflow marche avec le texte et les images. Ce n'est pas conseillé pour des mises en page très complexes.
Si le width n'est pas défini, l'overflow ne marche pas.
2. On peut forcer la coupure du mot. S'il y avait des espaces il couperait le mot au niveau des espaces. Mais comme comme il n'y en a pas, IE ne coupe pas le mot et adapte le div qui le contient. On peut le forcer à couper le mot sélon la largeur du div avec :
word-wrap: break-word;
Attention! Ceci n'est pas compatible W3C!
Ceci fonctionne seulement avec le texte, cela n'a aucun effet sur les images. Pour obtenir ceci et que ce soit compatible W3C il faudrait écrire ce code dans le <HEAD> de la page comme suit :
<!--[if IE]-->
<style type="text/css">
body{word-wrap:break-word;}
</style>
<![endif]-->
Plus d'information sur ce sujet
Haut
MARGE DOUBLE pour les Floats dans Explorer
Le problème
Quand on fait des floats, Internet Explorer double le margin gauche pour le premier float:left dans la ligne. La même chose arrive si les floats sont fait à droite : Internet Explorer double le margin droite du premier float:right de la ligne.
Notre float devrait être :
Mais sous Internet Explorer est:
La solution
Il faut ajouter au div qui contient le float:
display:inline
Ceci est ignoré dans tous les navigateurs (par obligation W3C) sauf dans IE et miraculeusement ceci empêche le double margin.
Plus d'information sur ce sujet
Haut
3 PX à coté d'un DIV FLOAT dans Explorer
Le problème
Explorer ajoute 3 pixels de margin aux divs qui contiennent un float. Cela décale le div d'à côté. Régardez les exemples dans le site de l'auteur.
La solution
Si on donne un width ou un height au paragraph qui contient le texte, les 3 px disparaissent.
On donnera un height préférablement. Un height de 1% évite des problèmes de hauteur
* html p{
height: 1%;
}
Plus d'informations et images
Haut
Menu DHTML qui passe derrière les select dans IE
Le problème
Le menu a été fait avec le script de suckerfish. Il fonctione aved des listes positionnées en absolute, dehors la page, qui se positionnent à sa place quand on passe par dessus le lien du menu. On utilise donc la règle #div li:hover dans le css et #div li.sfhover pour IE, parce qu'il ne reconnait pas le :hover des divs et des listes (ceci démande le javascript de suckerfish).
Voici le problème du menu dans IE
La solution
La solution consiste à faire appel à un fichier javascript qui ajoute un iframe qui n'est reconnu que par IE. Ceci, plus le traitement des z-index et du style de ce iframe dans le css règle le problème.
Le fichier et le bout de code css à intégrer, ainsi qu'une explication exhaustive du problème sont dans
ce site.
Les effets sécondaires
1. Ceci fait que notre menu n'est plus cliquable sous FireFox, quand la liste passe sur les selects. Pour regler ceci on ajoute au css:
#nav li a{
position:relative;
}
2. Notre menu est transparent. Ceci n'est pas du tout visible sous IE mais gêne quand même le fonctionnement des dernières modifications. Il faut donc modifier l'appel au filtre de transparence dans le css come suit:
On avait:
filter: alpha(opacity=100);
Et on le modifie par :
filter: alpha(opacity=100)!important;/*prioritaire sauf pour IE*/ filter:none;
3. Rien ne marche sous Opéra. Et ceci est à cause du javascript. Il faut donc vérifier que le navigateur n'est pas Opéra avant exécuter le script. Ajoutez donc un if au debut du fichier javascript, comme suit :
var nav = navigator.userAgent;
var op = "Opera";
if(nav.indexOf(op)==-1){
//Tout le contenu du fichier javascript
}
Plus d'information sur ce sujet.
Haut
Commentaires