Bagaimanakah Saya Boleh Membuat Pertanyaan Media CSS Saya Berfungsi dalam Internet Explorer 8?

Pertanyaan Media CSS dan Keserasian IE8

Internet Explorer 8 (IE8) menimbulkan had apabila ia berkaitan dengan pertanyaan media CSS tertentu, terutamanya penyata import.

Tidak disokong Pertanyaan:

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

Kaedah Penulisan Ganti:

Untuk menyokong IE8, penyataan import perlu dipisahkan kepada dua baris:

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

Kebimbangan Kod:

Dalam yang disediakan coretan kod:

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

Penyata import pertama akan menimpa penyata import kedua dalam IE8. Untuk mengelakkan perkara ini, import hendaklah disusun semula:

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

Penyelesaian:

Untuk keserasian yang lebih baik, pertimbangkan untuk menggunakan polyfill seperti css3-mediaqueries-js atau Respond. js, yang menyediakan sokongan untuk pertanyaan media dalam penyemak imbas lama seperti IE8.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Pertanyaan Media CSS Saya Berfungsi dalam Internet Explorer 8?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!