Die Webseite ist http://www.parentcenterhub.org/region6-aboutus/ Es wird auf allen Browsern außer IE9 korrekt angezeigt. Das CSS ist:
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
Die bedingte CSS für ie 7 und ie 8 ist:
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
Es gibt keine bedingte CSS-Datei für IE9. Also, schlagen Sie bitte den Code vor, den ich in style.css einfügen kann, damit die Seite auch korrekt für IE9 angezeigt wird. Bitte helfen Sie.
Antworten:
2 für die Antwort № 1IE9 und unterstützt nicht flexbox (siehe hier für vollständige Browser-Support-Details), so müssen Sie etwas wie Ihre IE7 / 8 alternative Layout für IE9 verwenden.
Sie können auf eine der folgenden Arten arbeiten, ohne ein bedingtes CSS für IE9 zu haben:
Verwenden Sie die CSS-Überschreibmechanismen. Geben Sie einfach Folgendes an
display:inline-blocküberdisplay:flex(usw.) innerhalb desselben Selektors, und jeder Browser wählt die zuletzt definierte Option aus, die er unterstützt. Also, wennflexist unterhalbinline-block, Wird IE9 verwendeninline-blockweil es nicht verstehtflexund andere werden es benutzenflexweil sie es wissen und es unten istinline-block. Klar, das geht nicht darum, daswidth, aber wir haben die Hälfte des Problems ohne browserspezifischen Code gelöst (in der Tat würde das auch für IE7 / 8 funktionieren, so dass Sie auch Ihren spezifischen Code für sie reduzieren können).widthkönnte mit einem ähnlichen Trick lösbar sein, indem man einen Standardwert mit einer Maßeinheit angibt, die in älteren Browsern nicht unterstützt wirdremodervminoder etwas und dann überschreibe es mit%für die älteren Browser, aber ob das für Sie funktionieren würde, hängt von Ihrem tatsächlichen Layout ab.Verwenden Sie eine Bibliothek wie z Modernizr, die Feature - Support - Flags hinzufügen, die Sie in Form von Klassennamen auf Ihrem verwenden können
<body>Etikett. Zum Beispiel wird ein hinzugefügtflexboxKlasse für Browser, die es unterstützen, und ano-flexbloxKlasse für diejenigen, die das nicht tun. Das bedeutet, dass Sie CSS-Code schreiben können, der auf Browser abzielt, die das Feature unterstützen oder nicht - zB:.flexbox #primär { Anzeige: flex; //etc... } .no-flexbox #primär { Anzeige: Inline-Block; Breite: 70%; }
Verwenden Sie einen Browser-Hack. Ich möchte das nicht wirklich vorschlagen, aber es ist eine Option. Es gibt CSS-Hacks, die speziell auf IE9 abzielen, wenn du sie wirklich verwenden willst. Ich werde sie hier nicht wiederholen, da ich nicht denke, dass es das Beste ist Möglichkeit. Wenn Sie sie verwenden möchten, wird Google Ihnen sagen, was Sie wissen müssen.
Verwenden Sie eine IE9-spezifische Klasse genau wie für IE7 und IE8. Du machst es schon, also scheint es nicht zu weit hergeholt zu sein.
Benutz einfach
inline-blocküber die Grenze. Wenn dieinline-blockLayout funktioniert, warum nicht einfach das verwenden. Flexbox ist großartig, aber wenn Sie IE7 / 8/9 Unterstützung brauchen, werden Sie nicht in der Lage sein, es konsistent zu benutzen, also ....?
Persönlich würde ich mit der Modernizr-Lösung gehen. Es löst dieses Problem sehr gut und kann auch mit den meisten anderen Fällen umgehen, in denen Sie browserspezifische Stile aufgrund fehlender Funktionen in Erwägung ziehen könnten.