Aide à la programmation, réponses aux questions / Css / Wordpress Custom Page Problème CSS pour IE9 - css, wordpress, internet-explorer

Wordpress Custom CSS question pour IE9 - css, wordpress, internet-explorer

La page Web est http://www.parentcenterhub.org/region6-aboutus/ Il s’affiche correctement sur tous les navigateurs sauf IE9. Le CSS est:

#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }

Le css conditionnel pour ie 7 et 8 est:

.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }

Il n'y a pas de fichier css conditionnel pour IE9. Donc, s'il vous plaît, suggérez le code que je peux mettre dans style.css afin que la page s'affiche également correctement pour IE9. S'il vous plaît aider.

Réponses:

2 pour la réponse № 1

IE9 et ne supporte pas flexbox (vois ici pour plus de détails sur le support du navigateur), vous devrez donc utiliser quelque chose comme votre mise en page alternative IE7 / 8 pour IE9.

Vous pouvez travailler sans avoir de CSS conditionnel pour IE9 de plusieurs façons:

Utiliser les mécanismes de substitution de CSS. Spécifiez simplement display:inline-block au dessus display:flex (etc) dans le même sélecteur, et chaque navigateur choisira la dernière option définie prise en charge. Donc si flex est inférieure à inline-block, IE9 utilisera inline-block parce qu'il ne comprend pas flex, et d'autres utiliseront flex parce qu’ils le savent et c’est en dessous inline-block. Bien sûr, cela ne concerne pas le réglage de la width, mais nous avons la moitié du problème résolu sans code spécifique à votre navigateur (en fait, cela fonctionnerait aussi pour IE7 / 8, vous pourrez donc réduire votre code spécifique pour eux aussi). width peut être résolu avec une astuce similaire en spécifiant une valeur par défaut à l'aide d'une unité de mesure non prise en charge par les anciens navigateurs tels que rem ou vmin ou quelque chose, et puis en écrasant avec % pour les anciens navigateurs, mais si cela fonctionnerait pour vous dépendrait de votre disposition réelle.
Utilisez une bibliothèque telle que Moderniser, qui ajoutera des indicateurs de prise en charge des fonctionnalités que vous pouvez utiliser sous la forme de noms de classe sur votre ordinateur. <body> étiquette. Par exemple, il va ajouter un flexbox classe pour les navigateurs qui le supportent, et un no-flexblox Cela signifie que vous pouvez écrire du code CSS qui cible les navigateurs qui supportent ou non la fonctionnalité - par exemple:

.flexbox #primary { affichage: flex; //etc... } .no-flexbox #primary { affichage: inline-block; largeur: 70%; }
Utilisez un piratage de navigateur. Je n'aime vraiment pas suggérer ceci, mais c'est une option. Il y a des hacks CSS qui ciblent spécifiquement IE9 si vous voulez vraiment les utiliser. Je ne les répéterai pas ici bien que je ne pense pas que ce soit le meilleur option. Si vous souhaitez les utiliser, Google vous indiquera ce que vous devez savoir.
Utilisez une classe spécifique à IE9 comme vous le faites actuellement pour IE7 et IE8. Vous le faites déjà, donc il ne semble pas que cela devrait être trop exagéré.
Juste utiliser inline-block à travers le conseil. Si la inline-block la mise en page fonctionne, pourquoi ne pas simplement l'utiliser. Flexbox est génial, mais si vous avez besoin du support IE7 / 8/9, vous ne pourrez pas l’utiliser de manière cohérente, alors ...?

Personnellement, je choisirais la solution Modernizr. Il résout ce problème très proprement et peut également traiter la plupart des autres cas dans lesquels vous pourriez envisager d'avoir des styles spécifiques au navigateur en raison de fonctionnalités manquantes.