Beberapa solusi untuk menyelesaikan masalah tidak mendukung tag HTML5 yang kompatibel dengan IE6/7/8

Penulis：Eve Cole Waktu Pembaruan：2025-04-03 20:00:04

Html5/"> Era HTML5 populer telah tiba. Jika Anda masih menunggu kompatibilitas browser, itu berarti Anda tidak berhubungan dengan web. Tentu saja, ini karena pengembangan klien seluler yang sedang booming. Jika Anda masih berjuang jika Anda harus menguasai teknologi HTML5 dan CSS3. Percaya, saya hanya bisa mengatakan: Percaya atau tidak!

Mari kita lihat struktur tag HTML5 standar: (Saya hanya berbicara tentang tag di sini, dan tidak ada lagi yang terlibat)

<! Doctype html>

<Html>

<head>

</head>

<body>

</teader>

</section>

</artikel>

</body>

</html>

Kemajuan tag HTML5 tentu saja karena semantiknya lebih intuitif. Tentu saja, ini hanyalah salah satu tips dari kemajuan HTML5. Beberapa orang menyarankan bahwa: Jangan katakan bahwa kemajuan HTML5 bersifat revolusioner, tetapi perkembangan! Saya tidak keberatan dengan pernyataan ini, tetapi memang revolusioner dalam beberapa hal. Saya tidak ingin keluar dari topik di sini, kami hanya berbicara tentang label.

Tentu saja, ketika bersemangat tentang tag semantik yang begitu indah, saya tidak hanya harus bertanya: apakah IE mendukungnya? Sayangnya, jawabannya adalah tidak. Jika Anda sudah takut dengan IE, Anda harus terus menanggung siksaannya yang tak ada habisnya. (IE9 dan IE10 sudah kompatibel dan mendukung HTML5 dan CSS3/"> CSS3.0)

Tetapi Anda harus senang bahwa ada banyak jenius di era yang Anda tinggali. Seseorang telah membantu Anda menyelesaikan masalah ini! Meskipun, itu tidak bisa disebut sempurna!

Mari kita lihat beberapa solusi untuk menyelesaikan masalah tidak mendukung tag HTML5 yang kompatibel dengan IE6/7/8:

1. JavaScript: Document.CreateElenment (......)

Bagian dari alasan IE6/7/8 tidak didukung adalah karena mereka tidak menganggap footer sebagai tag HTML yang valid. Jadi, bukankah kita akan menjadikannya label? Cara yang paling langsung tentu saja adalah membuat JavaScript: Document.createelenment (......)!

(fungsi(){

var element = ['header', 'footer', 'artikel', 'sendok', 'bagian', 'nav', 'menu', 'hgroup', 'detail', 'dialog', 'figur', 'figcaption'],

len = element.length;

while (len-) {

document.createelement (elemen [i])

}

}) ();

Ini hanya membuat beberapa tag HTML5 khas sehingga mereka dapat menjadi tag di IE6/7/8.

Seseorang telah menulis file JS yang lengkap, Anda hanya perlu memperkenalkannya, seperti ini:

<!-[jika lt yaitu 9]>

<! [endif]-> Ada juga tulisan

<!-[jika LTE IE 9]>

<! [Endif]-> Satu-satunya perbedaan antara html5shiv dan html5shim adalah m dan v, dan tidak ada perbedaan lain! Tentu saja ini bukan yang saya katakan. Teks aslinya adalah: ... satu -satunya perbedaan adalah bahwa seseorang memiliki M dan satu memiliki AV - itu saja.

Di sini kami ingin membuat catatan khusus: yaitu, penilaian anotasi unik IE:

LTE: Apakah singkatan kurang dari atau sama dengan, yang berarti kurang dari atau sama dengan.

LT: Apakah singkatan kurang dari, yang berarti kurang dari.

GTE: adalah singkatan yang lebih besar dari atau sama dengan, yang berarti lebih besar dari atau sama dengan.

GT: Apakah singkatan yang lebih besar dari, yang berarti lebih besar dari.

Lai : Itu berarti tidak sama, sama dengan simbol penilaian yang tidak setara dalam javascript

Meskipun IE9 mendukung tag HTML5, dukungannya tidak terlalu lengkap, sehingga Anda juga dapat menulis LTE, yang tergantung pada pilihan Anda!

Tentu saja, jangan lupa untuk menentukan properti tampilan dari tag yang baru dibuat. Dalam kebanyakan kasus, saya ingin tag diblokir:

header, footer, artikel, samping, bagian, nav, menu, hgroup, detail, dialog, gambar, figcaption {display: block}

2. Metode tag bersarang

Sebenarnya, terus terang, itu karena tag HTML5 semantik div sarang dan tag lainnya yang tersedia, dan kemudian hanya menulis gaya untuk divs. Saya tidak setuju dengan metode penulisan ini. Ini lebih baik daripada melakukannya, berikan tag id semantik atau kelas!

<!-[jika lt yaitu 9]>

<tyle>

tubuh> * .section {

Warna: #ff0;

}

</tyle>

<! [Endif]->

<tyle>

bagian .section {color: #f00;

}

</tyle>

<section> <div> Tes Konten ... </div> </sticle>

Tetapi jika mirip dengan struktur ini, tidak aman untuk digunakan :

<av>

<ul>

</ul>

</sav>

3. IE Komentar Bersyarat

<!-[jika lt yaitu 9]> <v> <! [Endif]->

<!-[jika yaitu 9]> <section> <! [Endif]->

<!-[if! Ie]> <!-> <section> <!-<! [Endif]->

......

<!-[jika lt yaitu 9]> </div> <! [Endif]->

<!-[jika yaitu 9]> </section> <! [Endif]->

<!-[if! Ie]> <!-> </siction> <!-<! [Endif]->

Lihatlah penilaian komentar unik IE lagi:

LTE: Apakah singkatan kurang dari atau sama dengan, yang berarti kurang dari atau sama dengan.

LT: Apakah singkatan kurang dari, yang berarti kurang dari.

GTE: adalah singkatan yang lebih besar dari atau sama dengan, yang berarti lebih besar dari atau sama dengan.

GT: Apakah singkatan yang lebih besar dari, yang berarti lebih besar dari.

Lai : Itu berarti tidak sama, sama dengan simbol penilaian yang tidak setara dalam javascript

Saya percaya semua orang mengerti apa yang terjadi! Ini adalah cara yang lebih menyakitkan! Sejumlah besar kode HTML membuat kode yang awalnya ingin menjadi semantik bahkan lebih membingungkan. Dan itu tidak kondusif untuk menulis gaya.

4. Gunakan xmlns untuk menentukan ruang kehidupan dokumen

Xmlns adalah singkatan dari namespace xhtml, yang merupakan namespace yang disebut. Seperti deklarasi Doctype, XMLN juga merupakan deklarasi. Berbeda dengan deklarasi Doctype masih ada dalam dokumen HTML, XMLN tidak ada dalam dokumen HTML. XMLN yang biasanya kita lihat muncul dalam dokumen XHTML.

<html xmlns = http: //www.w3.org/1999/xhtml lang = en> Ini adalah namespace asli xhtml, yang disederhanakan setelah html5.

<html lang = en> Metode dari log Elco Klingen menarik perhatian luas di awal. Teknik ini berisi namespace XML dan menggunakan elemen dengan awalan namespace, seperti:

<! Doctype html>

<body>

<html5: bagian>

<!-konten->

</html5: bagian>

</body>

</html>

Awalan: HTML5 bukan cara menulis standar, Anda juga dapat menggunakan karakter lain sebagai gantinya: HL5 juga OK. Dengan awalan, IE mengenali elemen baru, memungkinkan gaya diterapkan. Ini bekerja dengan baik di browser lain, jadi pada akhirnya, Anda berhasil membangun elemen yang sama dan gaya yang sama di setiap browser.

Metode ini memiliki cacat yang jelas: Anda harus menggunakan namespace yang diformat oleh XML dalam dokumen HTML, dan Anda juga perlu melakukan ini di CSS:

html5/: bagian {

Tampilan: Blok;

}

Jadi bagaimana kompatibilitasnya dengan JS? Ini adalah tes deml

<! Doctype html>

<head>

<tyle>

html5/: bagian {display: block; Lebar: 100px; Tinggi: 50px; Latar Belakang:#F00; Perbatasan: 1px Solid Blue; Warna: #ff0; }

</tyle>

window.onload = function () {

alert (document.geteLementById ("test"). innerhtml + "--- id")

alert (document.geteLementsbyTagname ("bagian") [0] .innerhtml + "--- tagname")

alert (document.geteLementsbyTagname ("bagian") [0] .innerHtml + "--- huruf besar")

}

</script>

</head>

<body>

<html5: bagian id = "test"> konten </html5: bagian>

</body>

</html>

Hasil tes diuji oleh IE6/7/8, tetapi hanya ID yang dapat diperoleh di FixFox dan Chrome, jadi metode ini bukan metode yang dapat diterima!