3

Je suis (évidemment) nouveau au développement web, et je me rends compte maintenant que mes sites sont assez foirés dans certaines versions d'IE, mais comment les réparer? Comment savoir ce qu'il faut changer dans le CSS et où, lorsque plusieurs calques et divs ne s'affichent pas correctement?IE7 Problèmes de compatibilité

Exemple: http://www.jwstudio.us/bkpa

Y at-il une des ressources pour IE CSS fixe/compatibilité? Qu'en est-il des différences de positionnement et de couleur entre les navigateurs Safari/Apple et Windows?

Répondre

3

Quelques conseils:

En savoir http://quirksmode.org/ - charges d'informations utiles là-bas.


Ne vous inquiétez pas des choses qui cherchent exactement les mêmes, IE 6,7 et 8 sont assez à jour, et il y a des bugs très réels dans la façon dont ils rendent les pages. Votre code peut être correct, et toujours mal dans IE.


Au lieu d'écrire <body>, écrivez:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]> <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <body class="ie9"> <![endif]--> 
<!--[if gt IE 9]> <body> <![endif]--> 
<!--[if !IE]><!--> <body> <!--<![endif]--> 

Ensuite, dans votre CSS, vous pouvez écrire des choses comme:

.someclass { 
    loads of normal CSS 
} 

.ie6 .someclass { 
    position:relative; 
    top:-20px; 
} 

Si vous voulez déplacer quelque chose 20px, mais seulement dans IE6. Cela vous aide à cibler les anciens navigateurs avec un minimum de tracas, et sans vous soucier que vous fassiez des bêtises dans d'autres endroits!


Utilisez des scripts comme ie9.js pour mettre à niveau IE plus pour utiliser de nombreuses fonctionnalités de IEs plus tard, ainsi que la fixation certains des bogues stupides. CSSPie est un autre outil utile pour obtenir le contour de la frontière, la boîte-ombre et les dégradés pour travailler dans ces anciens navigateurs!


Les différences de couleur seront probablement parce que vos images comprennent un profil de couleur, utilisez quelque chose comme imageoptim (OSX) pour dépouiller les informations étrangères telles que cela avant de mettre en ligne, ou les enregistrer pour le Web à partir de Photoshop.


Espérons que c'est utile!

2

Voici deux ressources fiables, en plus de Quirksmode que Rich B. mentionné

http://haslayout.net/css/

http://www.positioniseverything.net/explorer.html

Amusez-vous. ;)

Une autre utilisation plus standard des commentaires conditionnels consiste à placer des liens vers des feuilles de style spécifiques à l'intérieur. (au lieu de changer les classes de corps - mais c'est une méthode vraiment intéressante que je n'avais jamais vue auparavant!)

+1

Je le préfère parce qu'il réduit les requêtes http, tout en vous permettant de garder les choses ensemble. Si vous utilisez aussi SASS, vous pouvez résoudre un problème une fois, le coller dans un mixin, et ne plus jamais vous en soucier! –

1

Il existe un certain nombre de solutions que vous pouvez essayer.D'abord, vous pouvez créer une feuille de style séparée pour Internet Explorer, ce que je fais pour la majorité de mes sites. Vous l'inclure dans le code suivant:

<!-- [if IE]> 
<link type="text/css" rel="stylesheet" href="/path/to/style.css" /> 
<[endif]--> 

Deuxièmement, Google gère ce qu'on appelle le « Chrome Frame », qui est fondamentalement juste un navigateur Chrome dans Internet Explorer. C'est un peu plus exigeant du côté client, mais il corrige une grande majorité des problèmes que IE a avec le rendu.

Vous pouvez trouver plus d'informations sur le Chrome Frame here.

Edit:

Je recommande également le creusement de fossés de soutien pour IE6, car le navigateur est environ 10 ans, et la plupart des gens ont mis à jour maintenant.

0

Tout d'abord, vous devriez utiliser une réinitialisation quelconque. Une réinitialisation CSS rendra le terrain de jeu beaucoup plus niveau lors du codage de navigateur croisé.

Voir: http://developer.yahoo.com/yui/reset/

Idéalement, vous voulez éviter d'utiliser des feuilles de style spécifiques au navigateur. Si vous codez bien, vous n'en aurez pas besoin. Lorsque vous créez un site Web, vous devez le vérifier régulièrement dans chaque navigateur lorsque vous ajoutez du code. Sinon, vous pourriez vous retrouver avec un effet boule de neige de mauvais code. Au fur et à mesure que vous vous familiariserez avec les caprices d'IE, vous coderez de manière plus efficace sur les navigateurs croisés.

De même, j'éviterais d'utiliser autant d'attributs de position (c'est-à-dire "position: relative"). Votre mise en page est assez basique; il ne devrait pas y avoir de raison pour autant. Si vous comptez sur eux si fortement, vous devriez reconsidérer la façon dont vous structurez votre code.

1

Ressources dont vous aurez besoin:

Tout d'abord, certains sites avec des graphiques de compatiblité pour vous montrer les fonctions disponibles dans les différents navigateurs:

  1. Quirksmode.org - http://www.quirksmode.org/css/contents.html
  2. caniuse.com - http://caniuse.com/

Ensuite, les endroits où aller pour certains hacks ("Polyfils") pour améliorer la compatibilité:

  1. Modernizr - http://modernizr.com/
  2. CSS3Pie - http://www.css3pie.com/
  3. Dean Edwards IE7.js - http://code.google.com/p/ie7-js/
  4. collection de Modernizr de Polyfills - https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Enfin, si vous ne l'utilisez pas déjà, je recommande JQuery. C'est une bibliothèque Javascript qui traite de beaucoup de problèmes de compatibilité.