Komentar: Artikel ini terutama memperkenalkan solusi tentang bagaimana elemen HTML5 baru kompatibel dengan browser lama. Teman yang membutuhkannya bisa merujuknya.
Satu pertanyaan, apa yang dilemparkan guru kepada kami adalah: bagaimana membuat IE8-kompatibel dengan tag ini? (Membutuhkan desain DOM di JS)Meskipun saya baru saja berbicara tentang hari ini, saya masih perlu memahaminya.
<span> <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Bandingkan kompatibilitas elemen html5 baru di browser lama - html5 freedom </iteme>
</head>
<body>
<Header> Area Atas </header>
<av> Area Navigasi </av>
<cartikel> Area artikel </artikel>
<Footer> Area Bawah </footer>
</body>
</html> </span>
Di browser yang mendukung tag HTML5, itu muncul sebagai:
| -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| Area Top |
| Area Navigasi |
| Area Artikel |
| |
| --------------------------------------------------------------------------------------------------------------------------
Gaya tampilan di browser lama adalah:
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
Semua memiliki efek yang sama. Jika Anda tidak salah, browser lama tidak mengenali tag yang baru ditambahkan ini, sehingga semuanya diselesaikan dengan menggunakan elemen in-line. Oleh karena itu, ada terobosan dalam solusi untuk membuatnya menjadi elemen blok dan tidak akan berada di baris yang sama. Dengan cara ini, efek yang sama dapat ditampilkan di browser baru dan lama. Selain itu, browser mengenali tag. Solusi spesifik untuk kebutuhan untuk menambahkan tag baru adalah:
IE8/IE7/IE6 mendukung tag yang dihasilkan melalui Document.createelement Metode. Fitur ini dapat digunakan untuk memungkinkan browser ini mendukung tag baru HTML5. Kodenya adalah sebagai berikut:
document.createelement ('tag baru'); // Tambahkan untuk membuat tag baru
Kode JS adalah sebagai berikut:
<script>
document.createelement ('header');
document.createelement ('nav');
document.createelement ('artikel');
document.createelement ('footer');
</script>
Atau buat tag secara langsung dengan melingkar:
var e = "ABBR, artikel, samping, audio, kanvas, distalist, detail, dialog, sumber daya, gambar, footer, header, hgroup, tanda, menu, meter, nav, output, kemajuan, bagian, waktu, video" .split (',');
var i = e.length;
While (i-) {
Document.createElement (E [i])
}
Gaya Default Pengaturan Gaya CSS:
<tyle>
Artikel, selain kanvas, detail, figcaption, figur, footer, header, hgroup, menu, nav, bagian, ringkasan {
Tampilan: Blok;
}
</tyle>
Cara lain adalah dengan menggunakan metode kerangka kerja, menggunakan komentar bersyarat dan kode JS untuk mengimplementasikannya
<span> <!-[jika lt yaitu 9]>
<script> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [Endif]-> </span>
Tambahkan saja kode ini untuk mencapai masalah kompatibilitas, mengenai perhatian bersyarat
<!-Jika LT IE9>
Ini untuk menentukan apakah kurang dari IE9 atau di bawah. Jika ya, jalankan kode JS ini. Jika tidak, abaikan saja. Adapun tautan di JS, Anda dapat mengetahuinya dengan membukanya secara langsung dan memeriksanya. Ini juga merupakan sepotong kode besar.