รองรับ IE8 สำหรับ CSS Media Query

178

IE8 ไม่รองรับการสืบค้นสื่อ CSS ต่อไปนี้หรือไม่:

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

หากไม่เป็นเช่นนั้นวิธีอื่นในการเขียนคืออะไร? การทำงานเช่นเดียวกันนั้นใช้ได้ใน Firefox

ปัญหาใด ๆ กับรหัสด้านล่าง?

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

— testndtv
แหล่งที่มา

สำหรับผู้ที่ต้องการลองแบบอินไลน์ css กับสื่อและใช้การตอบกลับ (.min) .js การตอบสนองไม่ทำงานในสถานการณ์นี้ - ดูเหมือนว่าจะใช้งานได้กับไฟล์. css

— NoWomenNoCry

77

Internet Explorer รุ่นก่อน IE9 ไม่สนับสนุนคำสั่งสื่อ

หากคุณกำลังมองหาวิธีลดระดับการออกแบบสำหรับผู้ใช้ IE8 คุณอาจพบว่าการแสดงความคิดเห็นแบบมีเงื่อนไขของ IE มีประโยชน์ เมื่อใช้สิ่งนี้คุณสามารถระบุสไตล์ชีตเฉพาะ IE 8/7/6 ที่เขียนกฎก่อนหน้าได้

ตัวอย่างเช่น:

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

สิ่งนี้จะไม่อนุญาตสำหรับการออกแบบที่ตอบสนองใน IE8 แต่อาจเป็นวิธีที่ง่ายและเข้าถึงได้ง่ายกว่าการใช้ปลั๊กอิน JS

— แอรอน
แหล่งที่มา

94

ฉันไม่เห็นว่าสไตล์ชีทที่มีเงื่อนไขจะแก้ไขปัญหาการออกแบบที่ตอบสนองได้อย่างไร

— James Westgate

8

ฉันไม่เข้าใจว่าโซลูชันนี้จะแก้ปัญหาการออกแบบที่ตอบสนองใน IE ได้อย่างไร การโหลดสไตล์ชีทที่แตกต่างกันขึ้นอยู่กับเบราว์เซอร์ไม่มีอะไรเกี่ยวข้องกับการใช้คุณสมบัติสไตล์ที่แตกต่างกันขึ้นอยู่กับขนาดของเบราว์เซอร์

— Klikerko

13

ผมคิดว่าคำตอบที่ถูกคือว่า IE8 ไม่สนับสนุนคำสั่งสื่อ คำตอบประเภทนี้บอกว่า แต่มันยังไม่ชัดเจนในตอนแรก โดยไม่คำนึงว่าฉันคิดว่ามันมีการสนับสนุนและคำตอบนี้ช่วยให้ฉันตระหนักเป็นอย่างอื่น

— Jason

54

เป็นความจริงที่คำตอบนี้ไม่ใช่โซลูชันที่ตอบสนอง แต่สำหรับฉันแล้วมันเป็น "BUT" ขนาดใหญ่ความจริงก็คือ IE8 ไม่ได้ใช้กับ iPad หรือแท็บเล็ต Android IE8 สามารถใช้งานได้บนพีซี XP / Vista ส่วนใหญ่ตั้งแต่ปี 2546 ถึง 2552 หน้าจอกว้างประมาณ 1024px Windows Mobile อยู่ภายใต้ IE6 และ Windows Pone ภายใต้ IE9 + คำถามจริงที่นี่คือถามตัวเองว่าการตอบสนองต่อ IE8 มีประโยชน์จริงหรือ

— Gregoire D.

16

@GregoireD ใช่แล้ว. เพราะมีคนที่ดูหน้าเว็บด้วยการซูม ใน บริษัท ของฉันเราจัดรูปแบบหน้าเว็บตั้งแต่ 4x ขยายเป็น 800x600 เพื่อความมั่นใจ นั่นทำให้หน้าจอมีความกว้าง 400px ข้อความค้นหาสื่อมีประโยชน์จริง ๆ สำหรับสิ่งนั้นแม้ว่าจะมีเบราว์เซอร์ที่คุณเลือก (และมี IE8 อยู่ด้วย)

— Arkana

341

css3-mediaqueries-jsอาจเป็นสิ่งที่คุณกำลังมองหา: สคริปต์นี้จำลองเคียวรีสื่อบันทึก อย่างไรก็ตาม (จากเว็บไซต์ของสคริปต์) มัน "ไม่ทำงานบน@imported stylesheets (ซึ่งคุณไม่ควรใช้ต่อไปสำหรับเหตุผลด้านประสิทธิภาพ) นอกจากนี้จะไม่ฟังคุณสมบัติของสื่อ<link>และ<style>องค์ประกอบ"

ในหลอดเลือดดำเดียวกันคุณมีRespond.js ที่ง่ายกว่าซึ่งเปิดใช้งานเฉพาะmin-widthและmax-widthสอบถามสื่อ

— เคเอ็นยู
แหล่งที่มา

7

ทำไมไม่มีป้ายกำกับนี้เป็นคำตอบ? สมบูรณ์แบบสำหรับฉันขอบคุณ โดยวิธีที่คุณไม่ควรใช้นำเข้าแบบสอบถาม CSS เนื่องจากค่าใช้จ่าย

— RichW

สมบูรณ์แบบสิ่งที่ฉันกำลังมองหา!

— somdow

ขอบคุณ!! คำตอบนี้และ response.js ช่วยฉันได้หลายครั้งในการพยายามหาวิธีแก้ปัญหาสำหรับ Mediaqueries ใน ie8

— Ingusmat

3

ไม่เป็นไร -> ควรรวม. js หลังจากไฟล์. css ... xD

— kaljak

4

ตอบกลับทำงานได้ แต่ css3-mediaqueries ไม่ได้ ฉันคิดว่าเป็นเพราะการตอบสนองมีอยู่ในตัวเอง แต่ css3-mediaqueries อาศัยบางฟังก์ชั่น jQuery เช่นการตรวจสอบตัวแทนผู้ใช้และฟังก์ชั่นนี้ถูกคัดค้านและลบออก (ดู jQuery docs)

— Anton Boritskiy

50

ทางออกที่ดีที่สุดที่ฉันพบคือRespond.jsโดยเฉพาะอย่างยิ่งหากความกังวลหลักของคุณคือทำให้แน่ใจว่าการออกแบบที่ตอบสนองของคุณทำงานใน IE8 มันค่อนข้างเบาที่ 1kb เมื่อนาที / gzipped และคุณสามารถมั่นใจได้ว่าลูกค้า IE8 เท่านั้นที่โหลด:

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

เป็นวิธีที่แนะนำหากคุณใช้ bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

— แบรนดอนพัคห์
แหล่งที่มา

14

IE8 (และรุ่นที่ต่ำกว่า) และ Firefox ก่อนหน้า 3.5 ไม่สนับสนุนการสืบค้นสื่อ Safari 3.2 สนับสนุนบางส่วน

มีวิธีแก้ไขปัญหาบางอย่างที่ใช้ JavaScript เพื่อเพิ่มการสนับสนุนการสืบค้นสื่อในเบราว์เซอร์เหล่านี้ ลองเหล่านี้:

ปลั๊กอิน jQuery สื่อแบบสอบถาม (เกี่ยวข้องเฉพาะกับความกว้างสูงสุด / นาที)

css3-mediaqueries-js - ไลบรารีที่มีเป้าหมายเพื่อเพิ่มการสนับสนุนการสืบค้นสื่อให้กับเบราว์เซอร์ที่ไม่รองรับ

— Faraz Kelhini
แหล่งที่มา

ตกลง .. ฉันเพิ่งรวม css3-mediaqueries.js ในหน้าของฉัน .. ยังไม่ทำงานใน IE .. ฉันใช้คำค้นหาสื่อ "@import url (" desktop.css ") ไม่เพียง แต่หน้าจอและ (ความกว้างของอุปกรณ์: 768px);" เช่นเดียวกับ "@import url (" desktop.css ") ไม่ใช่หน้าจอและ (ความกว้างอุปกรณ์: 768px);"

— testndtv

ไม่แน่ใจว่าฉันต้องทำอะไรเพิ่มเติมเช่นกัน ... ยังรวมถึงสคริปต์ ..

— testndtv

โปรดทราบว่ามันใช้งานไม่ได้กับ css ที่นำเข้า ลองสิ่งนี้: <link rel = "stylesheet" type = "text / css" media = "ไม่ใช่หน้าจอและ (ความกว้างของอุปกรณ์: 768px)" href = "desktop.css" />

— Faraz Kelhini

โอ้ตกลง .. ฉันเข้าใจแล้ว ที่จริงแล้วในกรณีนี้อาจไม่ช่วยฉันเพราะฉันกำลังมองหาบางสิ่งบางอย่างโดยไม่ต้องทำอะไรบนหน้า .. ฉันเพียง แต่ภายนอกใน CSS ..

— testndtv

สคริปต์ googletrunk css3 js ระบุว่าใช้ได้เฉพาะกับ mediaquery ที่ใช้ในสไตล์ชีท CSS แทนที่จะเป็นแบบภายนอกเช่น 'เฉพาะหน้าจอและ .... ' ซึ่งหมายความว่าคุณต้องรวมสไตล์ชีตของคุณไว้ในหนึ่งเดียวและภายในสไตล์ที่คุณต้องการทำจากภายนอก: หน้าจอ @media และ (ความกว้างสูงสุด: 980px) {

— Capagris

11

นำมาจากหน้าโครงการ css3mediaqueries.js

หมายเหตุ: ใช้งานไม่ได้กับสไตล์ชีต @ import'ed (ซึ่งคุณไม่ควรใช้ด้วยเหตุผลด้านประสิทธิภาพ) นอกจากนี้จะไม่ฟังแอตทริบิวต์ของสื่อ<link>และ<style>องค์ประกอบ

— Bayo
แหล่งที่มา

+1 สำหรับบอกฉันว่าไม่ได้ใช้งานสไตล์ชีทของ @ import'ed! ประหยัดเวลาได้มากสำหรับธีมลูก WP ของฉัน

— Vinicius Garcia

8

วิธีที่ง่ายในการใช้ css3-mediaqueries-js คือการรวมสิ่งต่อไปนี้ก่อนแท็กเนื้อหาปิด:

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

— เบ็น
แหล่งที่มา

6

คำตอบที่แก้ไข: IE เข้าใจเพียงหน้าจอและพิมพ์เป็นสื่อนำเข้า CSS อื่นทั้งหมดที่ให้มาพร้อมกับคำสั่งการนำเข้าทำให้ IE8 ละเว้นคำสั่งการนำเข้า เบราว์เซอร์ Geco อย่างซาฟารีหรือโมซิลล่าไม่มีปัญหานี้

— SRA
แหล่งที่มา

IE ของฉันไม่ได้อยู่ในโหมดที่เข้ากันได้ .. นอกจากนี้ยังมีตัวเลือกอื่นสำหรับ IE .. โดยปกติฉันต้องการเลือกทุกอย่างยกเว้นอุปกรณ์หน้าจอ 768px ..

— testndtv

นอกจากนี้ตามที่กล่าวไว้ในลิงก์ที่คุณให้ฉันลองตั้งค่าประเภทเอกสารเป็น <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " w3.org/TR/xhtml1/DTD/xhtml1-transitional dtd "> ... ยังไม่ทำงาน ..

— testndtv

1

ฉันไม่คิดว่าฉันจะทำให้คุณถูกต้อง คุณสามารถใช้จาวาสคริปต์ในการตรวจสอบความละเอียดหน้าจอ? ด้วย CSS ไม่มีวิธีอื่น คุณแน่ใจหรือไม่ว่าคุณไม่มีข้อผิดพลาดที่เกี่ยวข้องกับที่เป็นสาเหตุให้ min จะ overriden หรือละเว้น เคล็ดลับที่ได้คือแถบเครื่องมือของนักพัฒนาซอฟต์แวร์ โดยที่คุณสามารถทดสอบการใช้ชีวิตโดยไม่ต้องเพจเจอร์

— sra

การสลับไปใช้โหมดเล่นโวหารเร็วมากคุณตรวจสอบสิ่งนั้นเหรอ? ที่สามารถนำไปสู่ผลลัพธ์ที่ไม่พึงประสงค์ Quirkmode จะเขียนทับ Doctype ของคุณ นอกจากนี้ยังมีการปฏิบัติพระเจ้าในการทดสอบเพียงแค่สิ่งที่คุณต้องการในโครงการขนาดเล็กสุดที่จะ enhure ว่ามันไม่ได้เป็นข้อผิดพลาดที่เกี่ยวข้อง / ผล

— SRA

ตกลง .. นี่คือวิธีที่ฉันอัปเดตตอนนี้ ... ฉันมี Common.css และข้างในฉันพูด ... หน้าจอ @import url ("desktop.css"); @import url ("ipad.css") หน้าจอเท่านั้นและ (ความกว้างอุปกรณ์: 768px); ไม่แน่ใจว่าวิธีนี้ถูกต้องหรือไม่ แต่ใช้ได้กับเดสก์ท็อป (IE / FF) เช่นเดียวกับ iPad มีวิธีการนี้ไหม

— testndtv

6

คำสั่งสื่อไม่ได้รับการสนับสนุนเลยใน IE8 และด้านล่าง

วิธีแก้ปัญหาที่ใช้ Javascript

ในการเพิ่มการรองรับ IE8 คุณสามารถใช้หนึ่งในหลาย ๆ โซลูชันของ JS ตัวอย่างเช่นตอบกลับสามารถเพิ่มเพื่อเพิ่มการรองรับการสืบค้นสื่อสำหรับ IE8 เท่านั้นด้วยรหัสต่อไปนี้:

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

CSS Mediaqueries เป็นอีกไลบรารีที่ทำสิ่งเดียวกัน รหัสสำหรับการเพิ่มห้องสมุดนั้นลงใน HTML ของคุณจะเหมือนกัน:

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

ทางเลือก

หากคุณไม่ชอบโซลูชันที่ใช้ JS คุณควรพิจารณาเพิ่มสไตล์ชีต IE <9 เท่านั้นที่คุณปรับสไตล์ของคุณให้เป็น IE <9 เพื่อที่คุณควรเพิ่ม HTML ต่อไปนี้ในรหัสของคุณ:

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

บันทึก :

ในทางเทคนิคแล้วมันเป็นอีกทางเลือกหนึ่ง: การใช้CSS hacksเพื่อกำหนดเป้าหมาย IE <9 มันมีผลกระทบเช่นเดียวกับสไตล์ชีต IE <9 เท่านั้น แต่คุณไม่ต้องการสไตล์ชีทแยกต่างหาก ฉันไม่แนะนำตัวเลือกนี้เนื่องจากพวกเขาสร้างรหัส CSS ที่ไม่ถูกต้อง (ซึ่งเป็นหนึ่งในหลายสาเหตุที่การแฮ็ค CSS เป็นเรื่องที่ขมวดคิ้วจนถึงปัจจุบัน)

— John Slegers
แหล่งที่มา

5

ก่อนหน้า Internet Explorer 8 ไม่รองรับการสืบค้นสื่อ แต่ขึ้นอยู่กับกรณีของคุณคุณสามารถลองใช้ความคิดเห็นแบบมีเงื่อนไขเพื่อกำหนดเป้าหมายเฉพาะ Internet Explorer 8 และต่ำกว่า คุณเพียงแค่ต้องใช้สถาปัตยกรรมไฟล์ CSS ที่เหมาะสม

— user1105491
แหล่งที่มา

4

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

ฉันใช้@media \0screen {}และใช้งานได้ดีสำหรับฉันใน REAL IE8

— sgarbesi
แหล่งที่มา

กฎรูปแบบที่กำหนดไว้ในบล็อกที่จะเพียง แต่นำมาใช้ใน IE8, เบราว์เซอร์อื่น ๆ จะไม่สนใจพวกเขา

— Luca

@Luca นอกจากนี้จะไม่อนุญาตให้ระบุความกว้างขั้นต่ำความกว้างสูงสุด ฯลฯ

— John Slegers

3

IE ไม่ได้เพิ่มการสนับสนุนการสืบค้นสื่อจนกว่า IE9 ดังนั้นด้วย IE8 คุณจะโชคไม่ดี

— Boris Zbarsky
แหล่งที่มา