HTML5新增元素如何相容於舊瀏覽器有哪些方法_html5教學技巧
html5
一個問題,老師丟給我們的,就是:如何讓IE8-相容這些標籤? (需要設計JS中的DOM)
雖然今天剛講的內容,但是,還是需要去了解下。
複製程式碼
程式碼如下:在支援HTML5標籤的瀏覽器顯示為:
|------------------------------火狐瀏覽器--------------------------------------------|
|頂部區域|
|導航區域|
|文章區域|
| |
|--------- -------------------------------------------------- ------------------------------|
而舊版的瀏覽器顯示樣式為:
------------------------------IE6瀏覽器-------------- ------------------------------

----------- -------------------IE8瀏覽器---------------------------- ----------------

都是同樣的效果,沒估計錯的話舊版瀏覽器都是不識別這些新增的標籤所以都是用行內元素來處理解決的,所以,有一個解決辦法的突破口就是讓它變成塊狀元素就不會處於同一行了,這樣在新舊瀏覽器都是可以顯示同樣的效果,再者就是讓瀏覽器識別標籤,需要新增標籤特定解決方法是:
IE8/IE7/IE6支援透過document.createElement方法產生的標籤,可以利用此特性讓這些瀏覽器支援HTML5新標籤,程式碼如下:
document.createElement('新標籤'); / /新增建立新標籤
JS程式碼如下:
複製程式碼
程式碼如下:<script> <br />document.createElement('header'); <br />document.createElement('nav' ); <br />document.createElement('article'); <br />document.createElement('footer'); <br /></script>
或直接循環方式建立標籤:
複製程式碼
程式碼如下:var e = "abbr, article, aside , audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
CSS樣式設定預設樣式:
複製程式碼
程式碼如下:}
} }
}
複製程式碼程式碼如下: 直接加入這一句程式碼就可實作相容問題,關於條件注意中的
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影:貝殼謎語解決方案
2 週前
By DDD
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
