Wie kann ich dafür sorgen, dass meine CSS-Medienabfragen in Internet Explorer 8 funktionieren?

CSS-Medienabfragen und IE8-Kompatibilität

Internet Explorer 8 (IE8) stellt eine Einschränkung dar, wenn es um bestimmte CSS-Medienabfragen geht, insbesondere Import-Anweisung.

Nicht unterstützt Abfrage:

@import url("desktop.css") screen and (min-width: 768px);

Alternative Schreibmethode:

Um IE8 zu unterstützen, ist es notwendig, die Importanweisung in zwei Zeilen zu unterteilen:

@import url("desktop.css") screen;
@media (min-width: 768px) {
  @import url("desktop.css");
}

Code-Bedenken:

Im bereitgestellten Code Ausschnitt:

@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);

Die erste Importanweisung überschreibt die zweite Importanweisung in IE8. Um dies zu vermeiden, sollten die Importe neu organisiert werden:

@import url("ipad.css") only screen and (device-width:768px);
@import url("desktop.css") screen;

Lösung:

Für eine bessere Kompatibilität sollten Sie die Verwendung von Polyfills wie css3-mediaqueries-js oder Respond in Betracht ziehen. js, die Unterstützung für Medienabfragen in älteren Browsern wie IE8 bieten.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass meine CSS-Medienabfragen in Internet Explorer 8 funktionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!