Bagaimana cara menargetkan hanya Internet Explorer 10 untuk situasi tertentu seperti kode Internet Explorer khusus-Internet atau kode JavaScript khusus Internet Explorer?
Saya mencoba ini, tetapi tidak berhasil:
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Internet Explorer 10 mengabaikan komentar bersyarat dan menggunakan <html lang="en" class="no-js">
alih - alih <html class="no-js ie10" lang="en">
.
@cc_on
pernyataan itu . Jadi, untuk mendeteksi apakah IE10 didukung atau tidak, Anda dapat menggunakan kode berikut:<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->
. (Saya memposting ini sebagai komentar, karena IE masih dalam pengembangan, jadi tidak diketahui apakah rilis final mendukung fitur ini juga)<script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>
Perbaikan: tidak perlu komentar bersyarat; bekerja bahkan jika komentar stripping kompresi / pemrosesan; tidak ada kelas yang ditambahkan untuk ie11; akan bekerja dengan ie11 berjalan dalam mode kompatibilitas ie10; tidak perlu tag skrip mandiri (hanya dapat ditambahkan ke javascript lain di kepala).if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';
- yang memecahkan 90% masalah (kadang-kadang mode kompatibilitas gagal, dalam hal ini Anda memerlukan tingkat perbaikan lain di atas itu).Jawaban:
Mungkin Anda dapat mencoba beberapa jQuery seperti ini:
Untuk menggunakan metode ini, Anda harus menyertakan jQuery Migrate library karena fungsi ini telah dihapus dari pustaka jQuery utama.
Berhasil cukup baik untuk saya. Tapi tentunya tidak ada pengganti untuk komentar bersyarat!
sumber
== '10.0'
agar bisa berfungsijQuery.browser
tidak lagi tersedia di versi jQuery (1.9) saat ini tanpa plugin. blog.jquery.com/2013/01/15/…if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }
Catat verion <10 untuk mendeteksi versi IE yang lebih lama. IE10 dan di atas berfungsi dengan baik dengan semua CSS3, HTML5, jquery, dll.Saya tidak akan menggunakan JavaScript
navigator.userAgent
atau $ .browser (yang menggunakannavigator.userAgent
) karena dapat dipalsukan.Untuk menargetkan Internet Explorer 9, 10 dan 11 (Catatan: juga Chrome terbaru):
Untuk menargetkan Internet Explorer 10:
Untuk menargetkan Edge Browser:
Sumber:
sumber
navigator.userAgent
"? Kompilasi bersyarat adalah fitur bawaan dari runtime JScript, yang tidak dapat dipalsukan melalui string agen-pengguna.Saya menemukan solusi di situs ini di mana seseorang memiliki komentar yang berharga :
Solusinya adalah:
Itu
sumber
if (/*@cc_on!@*/false && document.documentMode === 10) {}
yang berkeliling peringatan eval dalam program lintingInternet Explorer 10 tidak mencoba membaca komentar bersyarat lagi. Ini berarti ia akan memperlakukan komentar bersyarat seperti halnya peramban lain: sebagai komentar HTML biasa, dimaksudkan untuk diabaikan sepenuhnya. Melihat markup yang diberikan dalam pertanyaan sebagai contoh, semua browser termasuk IE10 akan mengabaikan bagian komentar, disorot abu-abu, seluruhnya. Standar HTML5 tidak menyebutkan sintaksis komentar bersyarat, dan inilah mengapa mereka memilih untuk berhenti mendukungnya di IE10.
Perhatikan, bagaimanapun, kompilasi bersyarat di JScript masih didukung, seperti yang ditunjukkan dalam komentar serta jawaban yang lebih baru. Tidak akan pergi dalam rilis final juga, tidak seperti
jQuery.browser
. Dan tentu saja, tak perlu dikatakan bahwa menghirup agen pengguna tetap rapuh seperti sebelumnya dan tidak boleh digunakan dalam keadaan apa pun.Jika Anda benar-benar harus menargetkan IE10, gunakan kompilasi bersyarat yang mungkin masih melihat dukungan dalam waktu dekat, atau - jika Anda dapat membantunya - gunakan perpustakaan deteksi fitur seperti Modernizr alih-alih (atau bersamaan dengan) deteksi browser. Kecuali jika use case Anda memerlukan noscript atau menampung IE10 di sisi server, menghirup agen pengguna akan lebih memusingkan daripada pilihan yang layak.
Kedengarannya cukup rumit, tetapi ingat bahwa sebagai peramban modern yang sangat sesuai dengan standar Web saat ini 1 , dengan anggapan Anda telah menulis kode interoperable yang sangat sesuai standar, Anda tidak perlu menyisihkan kode khusus untuk IE10 kecuali benar-benar diperlukan, yaitu seharusnya menyerupai browser lain dalam hal perilaku dan rendering. 2 Dan kedengarannya tidak masuk akal, mengingat sejarah IE, tetapi berapa kali Anda berharap Firefox atau Chrome berperilaku dengan cara yang sama hanya untuk bertemu dengan kecewa?
box-sizing
diperbaiki selama bertahun-tahunJika Anda memang memiliki alasan yang sah untuk menargetkan browser tertentu, tentu saja mengendusnya dengan alat lain yang diberikan kepada Anda. Saya hanya mengatakan bahwa Anda akan jauh lebih sulit untuk menemukan alasan seperti hari ini daripada apa yang dulu, dan itu benar-benar hanya bukan sesuatu yang dapat Anda andalkan.
1 Tidak hanya IE10, tetapi IE9, dan bahkan IE8 yang menangani sebagian besar standar CSS2.1 matang jauh lebih baik daripada Chrome, hanya karena IE8 sangat fokus pada kepatuhan standar (pada saat itu CSS2.1 sudah cukup stabil dengan hanya perbedaan kecil dari rekomendasi hari ini) sementara Chrome tampaknya sedikit lebih dari demo teknologi setengah jadi yang mutakhir dari standar semu.
2 Dan saya mungkin bias ketika saya mengatakan ini, tapi itu pasti sama saja. Jika kode Anda berfungsi di peramban lain tetapi tidak di IE, kemungkinan ini merupakan masalah dengan kode Anda sendiri daripada IE10 jauh lebih baik dibandingkan dengan, katakanlah, 3 tahun yang lalu, dengan versi IE sebelumnya. Sekali lagi, saya mungkin bias, tetapi mari kita jujur: bukankah Anda juga? Lihat saja komentar Anda.
sumber
<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
Tempat yang baik untuk memulai adalah Dokumentasi Dukungan Standar IE .
Berikut ini cara menargetkan IE10 di JavaScript:
Berikut ini cara menargetkan IE10 di CSS:
Jika IE11 perlu difilter atau direset melalui CSS, lihat pertanyaan lain: Bagaimana cara menulis hack CSS untuk IE 11?
sumber
Kedua solusi yang diposting di sini (dengan sedikit modifikasi) berfungsi:
atau
Anda memasukkan salah satu dari baris di atas di dalam tag kepala halaman html Anda sebelum tautan css Anda. Dan kemudian dalam file css Anda menentukan gaya Anda memiliki kelas "ie10" sebagai orangtua:
Dan voila! - browser lain tetap utuh. Dan Anda tidak perlu jQuery. Anda dapat melihat contoh bagaimana saya menerapkannya di sini: http://kardash.net .
sumber
Saya telah menulis plugin kecil vanilla JavaScript yang disebut Layout Engine , yang memungkinkan Anda untuk mendeteksi fitur IE 10 (dan setiap browser lainnya), dengan cara sederhana yang tidak dapat dipalsukan, tidak seperti sniffing agen pengguna.
Itu menambahkan nama mesin rendering sebagai kelas pada tag html dan mengembalikan objek JavaScript yang berisi vendor dan versi (jika perlu)
Lihat posting blog saya: http://mattstow.com/layout-engine.html dan dapatkan kode di GitHub: https://github.com/stowball/Layout-Engine
sumber
Saya menggunakan script ini - itu kuno, tetapi efektif dalam menargetkan terpisah Internet Explorer 10 style sheet atau berkas JavaScript yang disertakan hanya jika browser Internet Explorer 10, dengan cara yang sama yang Anda lakukan dengan komentar bersyarat. Tidak diperlukan jQuery atau plugin lain.
sumber
Anda dapat menggunakan PHP untuk menambahkan stylesheet untuk IE 10
Suka:
sumber
Jika Anda harus melakukan ini, Anda dapat memeriksa string agen pengguna di JavaScript:
Seperti yang telah disebutkan orang lain, saya selalu merekomendasikan deteksi fitur.
sumber
String.match()
akan mengembalikan array untuk pertandingan atau null jika tidak.!(String.match())
membuatnya kembali salah untuk pertandingan atau benar tanpa pertandingan.!(!(String.match()))
membuatnya kembali benar untuk pertandingan atau palsu tanpa pertandingan.!(!(something))
atau hanya!!something
karena itu mengubah apa pun menjadi boolean benar / salah. stackoverflow.com/questions/784929/...boolean
, misalnyavar name = 'me', hasName = !!name;
.Jika Anda ingin menargetkan IE 10 dengan Vanilla JavaScript, Anda mungkin ingin mencoba deteksi properti CSS:
Properti CSS
Alih-alih
msTouchAction
Anda juga dapat menggunakan salah satu properti CSS ini, karena mereka saat ini hanya tersedia di IE 10. Tetapi ini mungkin berubah di masa depan.Halaman uji
Saya telah mengumpulkan halaman pengujian dengan semua properti di CodePen.
sumber
clipBoardData adalah fungsi yang hanya tersedia di IE, jadi jika Anda ingin menargetkan semua versi IE yang dapat Anda gunakan
sumber
CSS untuk IE10 + dan IE9
sumber
Anda dapat menggunakan deteksi fitur untuk melihat apakah browser IE10 atau lebih besar seperti:
Hanya benar jika> IE9
sumber
Conditionizr (lihat dokumen) akan menambahkan kelas CSS browser ke elemen html Anda, termasuk ie10.
sumber
Dengan JavaScript:
Bekerja untuk semua IE.
Jadi perubahan
/Trident/g
dengan/Trident/x.0/g
manax = 4, 5, 6
atau7
(atau mungkin8
untuk masa depan).sumber
Saya hanya ingin menambahkan versi deteksi IE saya. Ini didasarkan pada potongan yang ditemukan di http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ dan diperluas juga untuk mendukung ie10 dan ie11. Mendeteksi IE 5 hingga 11.
Yang perlu Anda lakukan adalah menambahkannya di suatu tempat dan kemudian Anda selalu dapat memeriksa dengan kondisi sederhana. Global var
isIE
akan tidak terdefinisi jika bukan IE, atau sebaliknya akan menjadi nomor versi. Jadi, Anda dapat dengan mudah menambahkan hal-hal sepertiif (isIE && isIE < 10)
atau sama.sumber
Bagi saya kode berikut berfungsi dengan baik, semua komentar bersyarat bekerja di semua versi IE:
Saya di windows 8.1, tidak yakin apakah itu terkait dengan pembaruan ie11 ...
sumber
(gt IE 11)
bit sama sekali tidak perlu. Sebaiknya Anda lakukan<!--[if !(IE)]<!-->
saja.Inilah cara saya melakukan CSS khusus untuk Internet Explorer:
Dalam file JavaScript saya:
Dan kemudian dalam file CSS saya, y mendefinisikan setiap gaya yang berbeda:
sumber
Lihat http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/
sumber
gunakan babel atau naskah untuk mengkonversi kode ini js
sumber
Jawaban ini membuat saya 90% dari perjalanan ke sana. Saya menemukan sisa jawaban saya di situs Microsoft di sini .
Kode di bawah ini adalah apa yang saya gunakan untuk menargetkan semua yaitu dengan menambahkan kelas .ie ke
<html>
Gunakan jQuery (yang tidak menggunakan .browser untuk agen pengguna di 1.9+, lihat http://api.jquery.com/jQuery.browser/ ) untuk menambahkan kelas .ie:
sumber
Jika Anda tidak keberatan menargetkan IE10 dan di atas dan bukan browser IE, Anda dapat menggunakan komentar bersyarat ini:
Berasal dari http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
sumber
Jika benar-benar harus, Anda dapat membuat komentar bersyarat berfungsi dengan menambahkan baris berikut ke
<head>
:Sumber
sumber
solusi modern untuk css
sumber