IE8-Unterstützung für CSS Media Query

178

Unterstützt IE8 die folgende CSS-Medienabfrage nicht:

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

Wenn nicht, wie wird alternativ geschrieben? Das gleiche funktioniert gut in Firefox.

Probleme mit dem folgenden Code?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);
testndtv
quelle
für diejenigen, die Inline-CSS mit Medien versuchen und Antwort (.min) verwenden möchten .js Antwort funktioniert in dieser Situation nicht - es scheint, dass es für CSS-Dateien
funktioniert

Antworten:

77

Internet Explorer-Versionen vor IE9 unterstützen keine Medienabfragen .

Wenn Sie nach einer Möglichkeit suchen, das Design für IE8-Benutzer zu verschlechtern, sind die bedingten Kommentare des IE möglicherweise hilfreich. Auf diese Weise können Sie ein IE 8/7/6-spezifisches Stylesheet angeben, das die vorherigen Regeln überschreibt.

Beispielsweise:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Dies ermöglicht kein reaktionsschnelles Design in IE8, könnte jedoch eine einfachere und zugänglichere Lösung sein als die Verwendung eines JS-Plugins.

Aaron
quelle
94
Ich sehe nicht, wie bedingte Stylesheets ein responsives Designproblem lösen.
James Westgate
8
Ich verstehe nicht, wie diese Lösung Responsive Design im IE lösen würde. Das Laden verschiedener Stylesheets je nach Browser hatte beispielsweise nichts mit der Verwendung unterschiedlicher Stileigenschaften je nach Browsergröße zu tun.
Klikerko
13
Ich denke, die richtige Antwort ist, dass IE8 keine Medienabfragen unterstützt . Diese Antwort sagt das irgendwie aus, ist aber auf den ersten Blick nicht ganz klar. Unabhängig davon dachte ich, dass es Unterstützung hat und diese Antwort hat mir geholfen, etwas anderes zu realisieren.
Jason
54
Es ist wahr, dass diese Antwort keine reaktionsschnelle Lösung ist, ABER und für mich ist es ein riesiges "ABER". Tatsache ist, dass IE8 nicht auf iPad oder Android-Tablets verwendet wird. IE8 könnte hauptsächlich von 2003 bis 2009 auf XP / Vista-PCs verwendet werden, Bildschirme hauptsächlich mit einer Breite von etwa 1024 Pixel. Windows Mobile befindet sich unter IE6 und Windows Pone unter IE9 +. Die wahre Frage hier ist, sich zu fragen, ob es wirklich nützlich ist, auf IE8 zu reagieren.
Gregoire D.
16
@ GregoireD. Ja, so ist es. Weil es Leute gibt, die Webseiten mit Zoom anzeigen. In meiner Firma formatieren wir die Seiten seit dem 4-fachen Zoom in 800x600, um die Zugänglichkeit zu gewährleisten. Das macht einen Bildschirm mit einer Breite von 400 Pixel. Medienabfragen sind dafür sehr nützlich, trotz des von Ihnen gewählten Browsers (und IE8 ist enthalten).
Arkana
341

css3-mediaqueries-js ist wahrscheinlich das, wonach Sie suchen: Dieses Skript emuliert Medienabfragen. Allerdings (von der Website des Skripts) funktioniert es nicht mit @importEd-Stylesheets (die Sie aus Leistungsgründen sowieso nicht verwenden sollten). Hört auch nicht auf das Medienattribut der Elemente <link>und <style>.

In der gleichen Weise haben Sie die einfachere Respond.js , die nur min-widthund max-widthMedienabfragen aktiviert .

Knu
quelle
7
Warum wird dies nicht als Antwort bezeichnet? Perfekt für mich, danke. Übrigens sollten Sie aufgrund des Overheads keine CSS-Importabfragen verwenden.
RichW
perfekt, genau das, wonach ich gesucht habe!
Irgendwann
Danke dir!! Diese Antwort und reply.js haben mir eine Menge Zeit gespart, als ich versucht habe, eine Problemumgehung für Medienabfragen in IE8 durchzuführen.
Ingusmat
3
egal -> die .js sollten nach den .css-Dateien enthalten sein ... xD
kaljak
4
Antworten funktionierten, CSS3-Media-Abfragen jedoch nicht. Ich nehme an, es liegt daran, dass Respond in sich geschlossen ist, aber css3-mediaqueries basiert auf einigen jQuery-Funktionen wie der Benutzeragentenerkennung, und diese Funktionen wurden veraltet und entfernt (siehe jQuery-Dokumente).
Anton Boritskiy
50

Die beste Lösung, die ich gefunden habe, ist Respond.js, insbesondere wenn Ihr Hauptanliegen darin besteht, sicherzustellen, dass Ihr responsives Design in IE8 funktioniert. Es ist mit 1 KB ziemlich leicht, wenn min / gzipped und Sie können sicherstellen, dass nur IE8-Clients es laden:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Dies ist auch die empfohlene Methode, wenn Sie Bootstrap verwenden: http://getbootstrap.com/getting-started/#support-ie8-ie9

Brandon Pugh
quelle
14

IE8 (und niedrigere Versionen) und Firefox vor 3.5 unterstützen keine Medienabfrage. Safari 3.2 unterstützt dies teilweise.

Es gibt einige Problemumgehungen, die JavaScript verwenden, um diesen Browsern Unterstützung für Medienabfragen hinzuzufügen. Probiere diese:

JQuery-Plugin für Medienabfragen (behandelt nur die maximale / minimale Breite)

css3-mediaqueries-js - eine Bibliothek, die nicht unterstützten Browsern Medienabfrageunterstützung hinzufügen soll

Faraz Kelhini
quelle
Ok..Ich habe gerade die Datei css3-mediaqueries.js in meine Seite aufgenommen. Trotzdem funktioniert sie im IE nicht. Die Medienabfrage "@import url (" desktop.css ") nicht nur Bildschirm und (Gerätebreite: 768px); sowie "@import url (" desktop.css ") nicht Bildschirm und (Gerätebreite: 768px);"
Testndtv
Ich bin mir nicht sicher, ob ich noch etwas anderes tun muss. Neben dem Skript.
testndtv
Bitte beachten Sie, dass es bei importiertem CSS nicht funktioniert. Versuchen Sie Folgendes: <link rel = "stylesheet" type = "text / css" media = "nicht Bildschirm und (Gerätebreite: 768px)" href = "desktop.css" />
Faraz Kelhini
Ach so ich verstehe. Eigentlich in diesem Fall könnte es mir nicht helfen, da ich nach etwas suche, ohne etwas auf der Seite zu tun .. dh nur extern im CSS ..
testndtv
Dieses googletrunk css3 js-Skript gibt an, dass es nur mit Medienabfragen funktioniert, die im CSS-Stylesheet verwendet werden, und nicht extern wie "nur Bildschirm und ...". Dies bedeutet, dass Sie Ihre Stylesheets zu einem vereinheitlichen müssen und in ihnen das tun müssen, was Sie extern tun wollten: @media screen und (max-width: 980px) {
Capagris
11

Entnommen der Projektseite css3mediaqueries.js.

Hinweis: Funktioniert nicht mit @ importierten Stylesheets (die Sie aus Leistungsgründen sowieso nicht verwenden sollten). Hört auch nicht auf das Medienattribut der Elemente <link>und <style>.

Bayo
quelle
+1 für die Mitteilung, dass dies bei @ importierten Stylesheets nicht funktioniert! Sparen Sie mir viel Zeit bei meinem WP-Kinderthema.
Vinicius Garcia
8

Eine einfache Möglichkeit, css3-mediaqueries-js zu verwenden, besteht darin, vor dem schließenden Body-Tag Folgendes anzugeben:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
Ben C.
quelle
6

Bearbeitete Antwort: IE versteht nur Bildschirm und Druck als Importmedium. Alle anderen CSS, die zusammen mit der Importanweisung bereitgestellt werden, bewirken, dass IE8 die Importanweisung ignoriert. Geco Browser wie Safari oder Mozilla hatten dieses Problem nicht.

sra
quelle
Mein IE ist nicht im Kompatibilitätsmodus. Es gibt auch eine andere Alternative für den IE. Grundsätzlich möchte ich nur alles außer einem 768px-Bildschirmgerät auswählen.
testndtv
Wie unter dem von Ihnen angegebenen Link erläutert, habe ich versucht, den Doctype auf <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // DE" " w3.org/TR/xhtml1/DTD/xhtml1-transitional zu setzen. dtd "> ... funktioniert immer noch nicht ..
testndtv
1
Ich bin mir nicht sicher, ob ich dich richtig verstanden habe. Sie können JavaScript verwenden, um die Bildschirmauflösung zu ermitteln? Mit CSS gibt es keinen anderen Weg. Sind Sie sicher, dass Sie keinen verwandten Fehler haben, der dazu führt, dass die min überschrieben oder ignoriert wird? Ein Tipp ist die Entwickler-Symbolleiste. Damit können Sie live ohne Pagereloads testen
sra
Das wechselt sehr schnell in den Quirk-Modus. Hast du das überprüft? Das kann auch zu unerwünschten Ergebnissen führen. Quirkmode überschreibt Ihren Doctype. Es ist auch eine gute Übung, in einem winzigen Projekt genau das zu testen, was Sie wollen, um sicherzustellen, dass es sich nicht um einen verwandten Fehler / ein verwandtes Ergebnis handelt
sra
ok..Hier habe ich jetzt aktualisiert ... Ich habe common.css und darin sage ich; ... @import url ("desktop.css") Bildschirm; @import url ("ipad.css") nur Bildschirm und (Gerätebreite: 768px); Ich bin mir nicht sicher, ob dieser Ansatz korrekt ist, funktioniert aber sowohl für den Desktop (IE / FF) als auch für das iPad. Kann es bei diesem Ansatz ein Problem geben?
Testndtv
6

Medienabfragen werden in IE8 und darunter überhaupt nicht unterstützt.


Eine Javascript-basierte Problemumgehung

Um Unterstützung für IE8 hinzuzufügen, können Sie eine von mehreren JS-Lösungen verwenden. Beispielsweise kann Respond hinzugefügt werden, um die Unterstützung für Medienabfragen für IE8 nur mit dem folgenden Code hinzuzufügen:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries ist eine weitere Bibliothek, die dasselbe tut. Der Code zum Hinzufügen dieser Bibliothek zu Ihrem HTML-Code ist identisch:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Die Alternative

Wenn Sie eine JS-basierte Lösung nicht mögen, sollten Sie auch ein Stylesheet nur für IE <9 hinzufügen, in dem Sie Ihr Styling speziell für IE <9 anpassen. Dazu sollten Sie Ihrem Code folgenden HTML-Code hinzufügen:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Hinweis :

Technisch gesehen ist es eine weitere Alternative: Verwenden von CSS-Hacks als Ziel für IE <9. Es hat die gleiche Wirkung wie ein Stylesheet nur für IE <9, dafür benötigen Sie jedoch kein separates Stylesheet. Ich empfehle diese Option jedoch nicht, da sie ungültigen CSS-Code erzeugen (was nur einer von mehreren Gründen ist, warum die Verwendung von CSS-Hacks heutzutage allgemein verpönt ist).

John Slegers
quelle
5

Vor Internet Explorer 8 gab es keine Unterstützung für Medienabfragen. Abhängig von Ihrem Fall können Sie jedoch versuchen, bedingte Kommentare zu verwenden, um nur auf Internet Explorer 8 und niedriger abzuzielen. Sie müssen nur eine ordnungsgemäße CSS-Dateiarchitektur verwenden.

user1105491
quelle
4

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Ich habe verwendet @media \0screen {}und es funktioniert gut für mich in REAL IE8.

Sgarbesi
quelle
In diesem Block definierte Stilregeln werden nur in IE8 angewendet, andere Browser ignorieren sie .
Luca
@ Luca Außerdem ist es nicht möglich, eine minimale, maximale Breite usw. anzugeben.
John Slegers
3

IE hat die Unterstützung für Medienabfragen erst in IE9 hinzugefügt. Mit IE8 haben Sie also kein Glück.

Boris Zbarsky
quelle