Pourquoi mon site web s’affiche-t-il différemment selon les navigateurs ?
Faire en sorte qu’un site web se ressemble sur différents navigateurs est un problème constant pour les concepteurs de sites web du monde entier. La raison est simple: la visualisation d’un site web dépend de nombreuses variables différentes telles que:
- Interprétation de la page par le navigateur
Un site web est simplement un ensemble d’instructions décrivant à quoi un site devrait ressembler. C’est au navigateur de le rendre en lisant le code entier de votre site web et en produisant une certaine sortie. Il y a, cependant, des différences dans l’interprétation du code et différents navigateurs rendront la même page légèrement différemment. C’est pourquoi vous devriez vérifier l’apparence de votre site web sur différents systèmes d’exploitation et navigateurs pendant le développement de votre site web. Vous pouvez utiliser l’outil en ligne suivant pour voir à quoi ressemblent vos pages sur plusieurs navigateurs
Malheureusement, il n’existe pas de solution simple à ce problème. Vous devriez vérifier les spécificités de chaque navigateur qui ne parvient pas à afficher correctement votre site web et apporter les ajustements nécessaires à votre code. De tels problèmes de compatibilité peuvent survenir non seulement avec différents navigateurs, mais aussi à cause d’une ancienne version du navigateur qui ne prend pas complètement en charge les derniers standards.
- Le système d’exploitation (système d’exploitation) du visiteur
Si votre site web utilise des boutons d’envoi, des boutons radio, des cases à cocher et des champs d’édition, tous seront affichés en fonction de l’OS du visiteur et de son style. Les polices des navigateurs ont également tendance à être légèrement différentes lorsqu’elles sont rendues sur un PC, un Mac ou un ordinateur Linux.
Un domaine où les sites ont presque toujours une apparence différente est celui des pages avec des formulaires. Selon les systèmes d’exploitation et les navigateurs, le rendu des boutons des formulaires et des zones de texte est complètement différent. Sur un PC, les boutons d’envoi par défaut sont carrés et assez plats, sur un Mac, les boutons d’envoi par défaut sont des ovales joliment ombragés avec un dégradé. Par exemple, un bouton d’envoi peut ressembler à un rectangle gris sur votre thème Windows Classic, et à un ovale si vous utilisez le style XP. Pour contourner ce problème, vous pouvez créer des boutons personnalisés pour votre site web.
Le code d’un bouton d’envoi ordinaire ressemble à ceci:
<input type="submit" />Vous pouvez le remplacer par le code suivant pour spécifier l’image du bouton d’envoi:
<button name="submit" type="submit" value="Submit"><img alt="" src="submitimg.gif" />Submit</button>- La résolution d’affichage visiteur
La résolution d’affichage affecte énormément la manière dont un site web est affiché. Par exemple, si vous créez vos pages en 1024×768, elles ne tiendront pas sur l’écran d’un visiteur dont la résolution est de 800×600.
Pour résoudre ce problème, vous ne devez pas utiliser de dimensions statiques pour votre site web, c’est-à-dire qu’au lieu de définir width = 1024px vous pouvez utiliser width = 100%. Cela ne résoudra pas tous les problèmes mais au moins fera tenir la page dans l’écran.