Hi all,
yjybczh8gi
Encore une fois je suis obligé de passer plus qu’une heure pour fixer l’affichage sous ie6 mais cette fois, il y a une bannière en position:fixed en haut a gauche de la page qui doit être toujours affichée et vu que internet explorer 6 ne comprend pas ce que c’est position: fixed il faut trouver une solution pour remédier à ce problème.
Après une petite googlation 🙂 voilà en résumé ce qu’on peut utiliser comme alternative a position: fixed sous ie6 :
1- Solution pour corriger le problème d’affichage de position: fixed avec du CSS:
Utiliser les hacks css conditionnels pour mettre position: fixer pour les autres navigateurs a part ie6 et position: absolute pour ie6
|
1 2 3 4 5 6 |
<!--[if !IE]><!--> <a href="lien.php"><img src="images/image.gif" alt="" border="0" style="position: Fixed; top: 0px; left: 0px" /></a> <!--<![endif]--> <!--[if IE 6]><!--> <a href="lien.php"><img src="images/image.gif" alt="" border="0" style="position: absolute; top: 0px; left: 0px" /></a> <!--<![endif]--> |
2- Solution pour corriger le problème d’affichage de position: fixed avec du Javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style type="text/css"> img{position: fixed; <!--Pour l'affichage normale sous les autres navigateurs a part Internet explorer 6 ---> } </style> <!------------------- Pour IE6 --------------> <!--[if lte IE 6]> <style type="text/css"> img{ position: absolute; top:expression(documentElement.scrollTop+body.scrollTop); } body { background: url(null) fixed ; } </style> <! endif --> |
PS: Pour la deuxième solution il faut que javascript soit activé sur la machine du client
J’ai testé les deux solutions et ça fonctionne nickel 🙂 mais à la fin j’ai opté pour la deuxième parce que ça m’a paru plus utiles vu que d’après les statistiques plus de 40% d’internautes désactivent javascript sur leurs machines pour éviter les popups.
Catégorie: CSS
Tags: corriger, CSS, ie 6, ie6, internet explorer 6, position: fixed, regler, solution.
2 commentaires
[…] sais déjà que tout le monde galère avec IE6 car se dernier ne supporte pas les png transparent, ne sait pas interpreter position: fixed, ne sait pas lire correctement les propriétés CSS,…. Mais comme une grande partie des […]
j’apprecie beaucoup ton sens critique.