Wsparcie IE8 dla CSS Media Query

Czy IE8 nie obsługuje następującego zapytania o media CSS:

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

Jeśli nie, jaki jest alternatywny sposób pisania? To samo działa dobrze w przeglądarce Firefox.

Masz problemy z poniższym kodem?

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

Wersje programu Internet Explorer wcześniejsze niż IE9 nie obsługują zapytań o media .

Jeśli szukasz sposobu na obniżenie wyglądu dla użytkowników IE8, pomocne może być warunkowe komentowanie IE. Korzystając z tego, możesz określić arkusz stylów specyficzny dla IE 8/7/6, który nadpisuje poprzednie reguły.

Na przykład:

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

Nie pozwoli to na responsywne projektowanie w IE8, ale może być prostszym i bardziej dostępnym rozwiązaniem niż użycie wtyczki JS.

css3-mediaqueries-js jest prawdopodobnie tym, czego szukasz: ten skrypt emuluje zapytania o media. Jednak (ze strony skryptu) „nie działa on na @importedytowanych arkuszach stylów (których i tak nie powinieneś używać ze względu na wydajność). Nie będzie również nasłuchiwał atrybutu media elementów <link>i <style>”.

W tym samym stylu masz prostszą wersję Respond.js , która umożliwia tylko zapytania min-widthi max-widthmedia.

Najlepszym rozwiązaniem, jakie znalazłem, jest Respond.js, szczególnie jeśli głównym problemem jest upewnienie się, że Twój responsywny projekt działa w IE8. Jest dość lekki przy 1kb, gdy min / gzipped i możesz mieć pewność, że załadują go tylko klienci IE8:

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

Jest to również zalecana metoda, jeśli używasz bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (i niższe wersje) i Firefox przed wersją 3.5 nie obsługują zapytania o media. Safari 3.2 częściowo go obsługuje.

Istnieje kilka obejść, które wykorzystują JavaScript do dodawania obsługi zapytań o media do tych przeglądarek. Spróbuj tych:

Wtyczka jQuery Media Queries (obsługuje tylko maksymalną / minimalną szerokość)

css3-mediaqueries-js - biblioteka, która ma na celu dodanie obsługi zapytań o media do nieobsługiwanych przeglądarek

Zaczerpnięte ze strony projektu css3mediaqueries.js.

Uwaga: nie działa w arkuszach stylów @ importowanych (których i tak nie należy używać ze względu na wydajność). Nie będzie także nasłuchiwał atrybutu media elementów <link>i <style>.

Prostym sposobem użycia css3-mediaqueries-js jest dołączenie następujących elementów przed zamykającym znacznikiem body:

<!-- 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]-->

Edytowana odpowiedź: IE rozumie tylko ekran i druk jako nośnik importu. Wszystkie pozostałe CSS dostarczone wraz z instrukcją importu powodują, że IE8 ignoruje instrukcję importu. Przeglądarka Geco, taka jak safari lub mozilla, nie miała tego problemu.

Zapytania o media nie są w ogóle obsługiwane w IE8 i niższych wersjach.

Obejście oparte na JavaScript

Aby dodać obsługę IE8, możesz użyć jednego z kilku rozwiązań JS. Na przykład, Odpowiadać można dodać dodać obsługę zapytań mediów dla IE8 tylko z następującego kodu:

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

CSS Mediaqueries to kolejna biblioteka, która robi to samo. Kod dodawania tej biblioteki do kodu HTML byłby identyczny:

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

Alternatywa

Jeśli nie podoba ci się rozwiązanie oparte na JS, powinieneś również rozważyć dodanie arkusza stylów tylko dla IE <9, w którym dostosowujesz stylizację do IE <9. W tym celu do kodu należy dodać następujący kod HTML:

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

Uwaga :

Technicznie jest to jeszcze jedna alternatywa: użycie hacków CSS do atakowania IE <9. Ma taki sam wpływ jak arkusz stylów tylko w IE <9, ale nie potrzebujesz do tego oddzielnego arkusza stylów. Nie polecam jednak tej opcji, ponieważ produkują nieprawidłowy kod CSS (co jest tylko jednym z kilku powodów, dla których używanie hacków CSS jest obecnie powszechnie odrzucane).

W wersjach wcześniejszych niż Internet Explorer 8 zapytania Media nie były obsługiwane. Ale w zależności od przypadku możesz spróbować użyć komentarzy warunkowych, aby kierować reklamy tylko na Internet Explorera 8 i nowsze wersje. Musisz tylko użyć odpowiedniej architektury plików CSS.

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

Użyłem @media \0screen {}i działa dobrze dla mnie w PRAWDZIWYM IE8.

IE nie dodało obsługi zapytań o media do IE9. Dzięki IE8 nie masz szczęścia.