Wsparcie IE8 dla CSS Media Query

178

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);
html  css  responsive-design  internet-explorer-8  media-queries 
— testndtv
źródło
dla tych, którzy chcą wypróbować wbudowane css z mediami i użyć odpowiedzi (.min) .js odpowiedź nie działa w tej sytuacji - wygląda na to, że działa z plikami
— .css

Odpowiedzi:

77

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.

— Aaron
źródło
94
Nie rozumiem, w jaki sposób warunkowe arkusze stylów rozwiążą responsywny problem projektowy.
— James Westgate
8
Nie rozumiem, jak to rozwiązanie rozwiązałoby responsywne projektowanie w IE? Ładowanie różnych arkuszy stylów w zależności od przeglądarki nie miało nic wspólnego z używaniem różnych właściwości stylu, na przykład w zależności od rozmiaru przeglądarki.
— Klikerko,
13
Myślę, że właściwą odpowiedzią jest to, że IE8 nie obsługuje zapytań o media . Ta odpowiedź mówi, że tak, ale na pierwszy rzut oka nie jest do końca jasna. Niezależnie od tego myślałem, że ma wsparcie, a ta odpowiedź pomogła mi zrozumieć inaczej.
— Jason
54
To prawda, że ​​ta odpowiedź nie jest responsywnym rozwiązaniem, ALE i dla mnie jest to ogromne „ALE”, faktem jest, że IE8 nie jest używany na iPadzie ani tabletach z Androidem. IE8 może być używany na komputerach XP / Vista głównie w latach 2003-2009, ekrany mają głównie szerokość około 1024 pikseli. Windows Mobile jest pod IE6, a Windows Pone pod IE9 +. Prawdziwe pytanie brzmi: zadaj sobie pytanie, czy reagowanie na IE8 jest naprawdę przydatne?
— Gregoire D.
16
@GregoireD. Tak to jest. Ponieważ są ludzie, którzy przeglądają strony internetowe z powiększeniem. W mojej firmie formatujemy strony od 4x powiększenia 800x600, dla ułatwienia dostępu. To sprawia, że ​​ekran ma szerokość 400 pikseli. Zapytania o media są do tego naprawdę przydatne, pomimo wybranej przeglądarki (i IE8 jest dołączona).
— Arkana,
341

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.

— Knu
źródło
7
Dlaczego nie jest to oznaczone jako odpowiedź? Idealne dla mnie dzięki. Nawiasem mówiąc, nie powinieneś używać zapytań import css ze względu na narzut.
— RichW
idealnie, dokładnie to, czego szukałem!
— somdow
Dziękuję Ci!! Ta odpowiedź i respond.js pozwoliły mi zaoszczędzić mnóstwo czasu na próbę obejścia zapytań o media w ie8.
— Ingusmat
3
nevermind -> .js powinny być dołączone po plikach .css ... xD
— kaljak
4
Odpowiedź zadziałała, ale css3-mediaqueries nie. Przypuszczam, że to dlatego, że Respond jest samodzielny, ale css3-mediaqueries opiera się na niektórych funkcjach jQuery, takich jak wykrywanie klienta użytkownika, a funkcje te były przestarzałe i usuwane (patrz dokumentacja jQuery).
— Anton Boritskiy,
50

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

— Brandon Pugh
źródło
14

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

— Faraz Kelhini
źródło
Ok .. Właśnie włączyłem plik css3-mediaqueries.js na mojej stronie .. Nadal nie działa w IE .. kwerenda medialna "@import url (" desktop.css ") nie tylko ekran i (szerokość urządzenia: 768px); " a także „@import url („ desktop.css ”) nie wyświetla ekranu i (szerokość urządzenia: 768px);”
— testndtv 24.04.11
Nie wiem, czy muszę zrobić coś dodatkowego jako well..besides tym skrypcie ..
— testndtv
Pamiętaj, że to nie działa na importowanym css. spróbuj tego: <link rel = "stylesheet" type = "text / css" media = "not screen i (device-width: 768px)" href = "desktop.css" />
— Faraz Kelhini 24.04.2011
och ok .. rozumiem. Właściwie w takim przypadku może mi to nie pomóc, ponieważ szukam czegoś bez robienia czegokolwiek na stronie .. tylko zewnętrznie w CSS ..
— testndtv 24.04.2011
Ten skrypt js googletrunk css3 określa, że ​​działa on tylko z zapytaniami medialnymi używanymi w arkuszu stylów CSS, a nie zewnętrznie, takimi jak „tylko ekran i ...”. Oznacza to, że musisz zjednoczyć swoje arkusze stylów w jeden, a wewnątrz nich rób to, co chciałeś zrobić zewnętrznie: @media screen i (max-width: 980px) {
— Capagris
11

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

— Bayo
źródło
+1 za poinformowanie mnie, że nie działa na arkuszach stylów @ importowanych! Zaoszczędź mi dużo czasu dzięki motywowi potomnemu WP.
— Vinicius Garcia
8

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]-->
— Ben C.
źródło
6

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.

— sra
źródło
Mój IE nie jest w trybie zgodności .. Jest też jakaś inna alternatywa dla IE .. Zasadniczo chcę tylko wybrać wszystko oprócz urządzenia z ekranem 768px ..
— testndtv 24.04.11
Tak jak omówiono w podanym linku, próbowałem ustawić doctype jako <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " w3.org/TR/xhtml1/DTD/xhtml1-transitional. DTD „> ... nadal nie działa ..
— testndtv
1
Nie jestem pewien, czy dobrze zrozumiałem. Możesz użyć JavaScript do wykrycia rozdzielczości ekranu? Z CSS nie ma innej drogi. Czy jesteś pewien, że nie masz żadnego powiązanego błędu z tym, że powoduje to nadpisanie lub zignorowanie wartości minimalnej. Mam wskazówkę, to pasek narzędzi dla programistów. Dzięki temu możesz testować na żywo bez przeładowań stron
— sra 24.04
Bardzo szybko zmienia się tryb dziwactwa, sprawdziłeś to? Może to również prowadzić do niepożądanych rezultatów. Quirkmode nadpisze twój typ dokumentu. Dobrą praktyką jest również testowanie tego, co chcesz w bardzo małym projekcie, aby upewnić się, że nie jest to związany z tym błąd / wynik
— sra 24.04. O
ok .. Oto jak zaktualizowałem teraz ... Mam plik common.css, a wewnątrz niego mówię; ... ekran @import url („desktop.css”); @import url („ipad.css”) tylko ekran i (szerokość urządzenia: 768px); Nie jestem pewien, czy to podejście jest prawidłowe, ale działa zarówno na komputerach stacjonarnych (IE / FF), jak i na iPadzie. Czy może być jakiś problem z tym podejściem?
— testndtv 24.04.11
6

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

— John Slegers
źródło
5

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.

— użytkownik1105491
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.