Bagaimana untuk membuat kemahiran tutorial HTML5_html5 sokongan IE

Semakin banyak tapak mula menggunakan tag HTML5, tetapi keadaan semasa ialah ramai orang masih menggunakan IE6, IE7 dan IE8. Untuk membenarkan semua penyemak imbas mempunyai akses biasa, terdapat dua penyelesaian:

1 Cipta berbilang set templat untuk tapak web dan gunakan program untuk menilai Ejen Pengguna untuk memaparkan kandungan yang berbeza untuk penyemak imbas yang berbeza. pengguna. Halaman, contohnya: Youku.com.

2. Gunakan Javascript untuk membolehkan penyemak imbas yang tidak menyokong HTML5 menyokong teg HTML.

Penyelesaian yang lebih baik untuk IE ialah html5shiv. htnl5shiv terutamanya menyelesaikan masalah bahawa elemen baharu yang dicadangkan oleh HTML5 tidak diiktiraf oleh IE6-8 Unsur baharu ini tidak boleh digunakan sebagai nod induk untuk membungkus elemen anak dan gaya CSS tidak boleh digunakan. Untuk menggunakan gaya CSS pada elemen yang tidak diketahui hanya laksanakan document.createElement(elementName). html5shiv dicipta berdasarkan prinsip ini.

Penggunaan html5shiv adalah sangat mudah Memandangkan IE9 menyokong html5, anda hanya perlu menambah kod berikut pada kepala halaman:

Salin kod

Kod tersebut adalah seperti berikut:

*{margin:0;padding:0;} body {background-color:white; color: black; text-align:center;} Kopfzeile, Fußzeile, Navigation, Abschnitt, Artikel {display:block;} Kopfzeile {width:100%; Hintergrundfarbe:gelb;} nav {width:30%; background-color:orange;float:left;} Abschnitt {width:65%; background-color:SpringGreen ; float:right;} Artikel {width:70%; margin:2em 10%; Fußzeile {width:100%; background-color:pink;clear:both;}

Hallo

Menü

Abschnitt

artikel 1

artikel 2

Die Fußzeile

Tipp: Sie können einen Teil des Codes ändern, bevor Sie

ausführen Code kopieren

Der Code lautet wie folgt:

Um diese Elemente anzuordnen, müssen wir CSS verwenden, um sie manuell in Blockelemente umzuwandeln, wie im folgenden Beispiel:

Code kopieren

Der Code lautet wie folgt: Kopfzeile, Fußzeile, Navigation, Abschnitt, Artikel {

display:block;}