首頁 > 文章 > web前端 > 讓IE支援HTML5的方法_html5教學技巧

讓IE支援HTML5的方法_html5教學技巧

WBOY原創: 2016-05-16 15:51:181342瀏覽

越來越多的網站開始使用 HTML5 標籤，但目前的情況是還有很多人在使用IE6、IE7、IE8。為了讓所有瀏覽者都可以正常的訪問，解決方案有下面兩個：

1.為網站創建多套模板，透過程式對User-Agent的判斷為不同的瀏覽器用戶顯示不同的頁面，例如：優酷網。

2.使用Javascript來使不支援HTML5的瀏覽器支援HTML標籤。

針對IE比較好的解法是html5shiv。 htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，並且不能應用CSS樣式。讓CSS 樣式套用在未知元素上只需執行 document.createElement(elementName) 即可實作。 html5shiv就是根據這個原理創建的。

html5shiv的使用非常的簡單，考慮到IE9是支援html5的，所以只需要在頁面head中加入以下程式碼即可：

複製程式碼

程式碼如下:

Selepas menambah kod di atas, kesan yang dipaparkan dalam IE8 adalah seperti berikut:
在IE 8显示的例子,处理后

Kod JavaScript untuk mencipta nod dalam contoh tapak tapak kelihatan terlalu kembung dan kod yang disediakan oleh smashingmagazine nampaknya lebih ringkas.
Demonstrasi adalah seperti berikut

<!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset=utf-8>

<title>Penggayaan asas teg struktur baharu</title>
<gaya>
*{margin:0; padding:0;}
badan {warna latar belakang: putih;
 
pengepala, pengaki, navigasi, bahagian, artikel {display:block;}
 
pengepala {lebar:100%;warna latar belakang:kuning;}
 
nav {width:30%; background-color:oren;float:left;}
bahagian {width:65%; background-color:SpringGreen ;
artikel {lebar:70%; margin:2em 10%;
 
footer {lebar: 100%; warna latar belakang: merah jambu;
</style>
 
 

 
<badan>
<header><h1>Hello</h1></header>
<nav><p>Menu</p></nav>
<bahagian>
<p>Bahagian</p>
    <artikel><p>artikel 1</p></article>
    <artikel><p>artikel 2</p></article>
</section>
<footer><p>Footer</p></footer>
</badan>
</html>

Petua: Anda boleh mengubah suai sebahagian daripada kod sebelum menjalankan

Salin Kod

Kod tersebut adalah seperti berikut:

HTML5 berkelakuan secara lalai Untuk menyusun elemen ini, kita perlu menggunakan CSS untuk menukarnya secara manual kepada elemen blok, seperti dalam contoh berikut:

Salin kod

Kodnya adalah seperti berikut:

pengepala, pengaki, navigasi, bahagian, artikel {
paparan:sekat;

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5邊玩邊學（2）基礎繪圖實作方法_html5教學技巧下一篇：HTML5邊玩邊學（2）基礎繪圖實作方法_html5教學技巧

看更多

讓IE支援HTML5的方法_html5教學技巧

相關文章