it-swarm.com.de

IE8-Unterstützung für CSS Media Query

Unterstützt IE8 die folgende CSS-Medienabfrage nicht:

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

Wenn nicht, wie lautet die alternative Schreibweise? Das gleiche funktioniert gut in Firefox.

Probleme mit dem Code unten?

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

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

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

Zum Beispiel:

<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.

77
Aaron

css3-mediaqueries-js ist wahrscheinlich das, wonach Sie suchen: Dieses Skript emuliert Medienabfragen. Allerdings (von der Skript-Seite) "funktioniert es nicht auf @import - Stylesheets (die Sie aus Performance-Gründen sowieso nicht verwenden sollten). Außerdem wird das Medienattribut des <link> und <style> Elemente ".

Ebenso haben Sie das einfachere Respond.js , mit dem nur min-width Und max-width Medienabfragen möglich sind.

341
Knu

Die beste Lösung, die ich gefunden habe, ist Respond.js , insbesondere wenn Sie sich hauptsächlich darum kümmern, dass Ihr responsives Design in IE8 funktioniert. Bei min/gzip ist es mit 1 KB ziemlich leicht 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

50
Brandon Pugh

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

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

Media Queries jQuery-Plugin (behandelt nur die maximale/minimale Breite

css3-mediaqueries-js - eine Bibliothek, die nicht unterstützenden Browsern Unterstützung für Medienabfragen hinzufügen soll

14
Faraz Kelhini

Entnommen der Projektseite von css3mediaqueries.js.

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

11
Bayo

Eine einfache Möglichkeit, css3-mediaqueries-js zu verwenden, besteht darin, vor dem schließenden body-Tag Folgendes einzufügen:

<!-- 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]-->
8
Ben C

Bearbeitete Antwort: IE versteht nur Bildschirm und Druck als Importmedium. Alle anderen CSS, die zusammen mit der Importanweisung geliefert werden, führen dazu, dass IE8 die Importanweisung ignoriert. Geco-Browser wie Safari oder Mozilla hatten dies nicht Problem.

6
sra

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


Eine auf Javascript basierende Problemumgehung

Um die Unterstützung für IE8 hinzuzufügen, können Sie eine von mehreren JS-Lösungen verwenden. Beispielsweise kann Respond hinzugefügt werden, um Medienabfrageunterstützung 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 Ihnen eine JS-basierte Lösung nicht gefällt, sollten Sie auch ein Stylesheet für IE <9 hinzufügen, in dem Sie Ihr Styling spezifisch für IE <9 anpassen. Dazu sollten Sie Ihrem Code den folgenden HTML-Code hinzufügen:

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

Hinweis:

Technisch ist es eine weitere Alternative: Verwenden von CSS-Hacks , um auf IE <9 abzuzielen. Dies hat die gleichen Auswirkungen wie ein Stylesheet mit IE <9, Sie benötigen 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).

6
John Slegers

Vor Internet Explorer 8 wurden Medienabfragen nicht unterstützt. Abhängig von Ihrem Fall können Sie jedoch versuchen, bedingte Kommentare zu verwenden, um nur Internet Explorer 8 und niedriger als Ziel festzulegen. Sie müssen lediglich eine ordnungsgemäße Architektur für CSS-Dateien verwenden.

5
user1105491

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

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

4
sgarbesi

Der IE hat die Unterstützung für Medienabfragen erst mit dem IE9 hinzugefügt. Mit IE8 hast du also Pech.

3
Boris Zbarsky