HTML5新增元素如何兼容舊瀏覽器有哪些方法

2020-03-24 16:18:18

字體：大中小

供稿：網(wǎng)友

一個(gè)問題，老師拋給我們的，就是：如何讓IE8-兼容這些標(biāo)簽？（需要設(shè)計(jì)JS中的DOM）

雖然今天剛講的內(nèi)容，但是，還是需要去了解下。

復(fù)制代碼代碼如下:
span !doctype html
html
head
meta charset="UTF-8"
title HTML5新增元素在舊瀏覽器的兼容-HTML5自由者 /title
/head
body
header 頂部區(qū)域 /header
nav 導(dǎo)航區(qū)域 /nav
article 文章區(qū)域 /article
footer 底部區(qū)域 /footer
/body
/html /span

在支持HTML5標(biāo)簽的瀏覽器顯示為：

|------------------------------火狐瀏覽器--------------------------------------------|

|頂部區(qū)域 |

|導(dǎo)航區(qū)域 |

|文章區(qū)域 |

| |

|-----------------------------------------------------------------------------------------|

而在舊版的瀏覽器顯示樣式為：

------------------------------IE6瀏覽器--------------------------------------------

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

都是同樣的效果，沒估計(jì)錯(cuò)的話舊版瀏覽器都是不識(shí)別這些新增的標(biāo)簽所以都是用行內(nèi)元素來(lái)處理解決的，所以，有一個(gè)解決辦法的突破口就是讓它變成塊狀元素就不會(huì)處于同一行了，這樣在新舊瀏覽器都是可以顯示同樣的效果，再者就是讓瀏覽器識(shí)別標(biāo)簽，需要新增標(biāo)簽具體解決辦法是：

IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，代碼如下：

document.createElement（新標(biāo)簽）; / /新增創(chuàng)建新標(biāo)簽

JS代碼如下：

復(fù)制代碼代碼如下:
script
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
/script

或者是直接循環(huán)方式創(chuàng)建標(biāo)簽：

復(fù)制代碼代碼如下:
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])
}

CSSyangshi_10628_1.html' target='_blank'>CSS樣式設(shè)置默認(rèn)樣式：

復(fù)制代碼代碼如下:
style
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
/style

再者還有一種辦法就是用框架的方法，用到條件注釋加JS代碼實(shí)現(xiàn)

復(fù)制代碼代碼如下:
span !--[if lt IE 9]
script src="http://html5shim.googlecode.com/svn/trunk/html5.js" /script
![endif]-- /span

直接加入這一句代碼就可實(shí)現(xiàn)兼容問題，關(guān)于條件注意中的

!--if lt IE9

是判斷是否小于IE9以下瀏覽器，如果是就執(zhí)行這段JS代碼，如果不是，就忽略掉。至于JS中的鏈接直接打開進(jìn)去看看就知道了，也是一大段的代碼。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html實(shí)現(xiàn)頁(yè)面靜態(tài)化的案例

下一篇：HTML 30分鐘入門教程