Compatibilité IE8, Firefox, smartphones

Bonjour

j'ai beaucoup lu et apprécié alsacreations lorsque j'ai mis en place les feuilles de style sur mon site www.lesarbres.fr en 2009.

récemment j'ai modifié ma feuille de style pour s'adapter aux iphone et android, en ajoutant le code @media screen and (min-width: 650px)
{...

L'ancienne css est : stylepc2-0.css (on peut la télécharger)
La nouvelle : stylepc2.css

Or je découvre que IE n'aime pas du tout et affiche la page comme sur les smartphones comme si le code ci-dessus n'était pas compris

connaissez vous une solution pour une feuille de style commune à tous les navigateurs ?
je voudrais que l’affichage IE reste correct comme ds Firefox et que ds les smartphones on voit les div successivement, centre, gauche et droit et pub en bas

une solution serait que je sélectionne l'ancienne css uniquement pour IE avec un code php à mettre dans chaque page. Un peu long mais faisable

merci par avance
Modifié par lesarbres (30 Jul 2012 - 12:13)

Hello,

Pour que les navigateurs qui ne comprennent pas les Media Queries (CSS3), dont IE8, n'interprètent pas le code à l'intérieur d'une media query, il faut utiliser le mot-clé "only":

@media screen and (query) {
  /* IE8 interprètera ce code pour le média "screen" */
}
@media only screen and (query) {
  /* IE8 n'interprètera pas ce code */
}

J'imagine que les navigateurs qui implémentent les règles @media de CSS 2.1 mais pas les Media Queries de CSS3 vont lire @media only something and (query) comme une déclaration pour le média "only" (fictif) et donc ignorer le code. (Je ne sais pas si c'est réellement ce qui se passe pour ces navigateurs, mais en tout cas ça marche.)

Bonsoir
finalement,n j'ai opté pour la feuille de style propre à IE avec un bout de code php :

 if (isset($_SERVER["HTTP_USER_AGENT"]) && preg_match("/msie/i",$_SERVER["HTTP_USER_AGENT"]))
      {  echo "<link rel=\"stylesheet\" href=\"stylepc2-ie.css\" type=\"text/css\" />\n";}

etc...
ça fait 900 fichiers à remplacer !
car j'ai aussi la version en anglais www.european-trees.com à mettre à jour...
cdlt