在IE6/7/8下識別html5標(biāo)簽(讓老式瀏覽器識別html5)
發(fā)布時(shí)間：2013-06-28 17:34:20 作者：佚名 
我要評論
我要評論html5添加了許多語義化的標(biāo)簽估計(jì)很多老式IE瀏覽器都不支持，在chrome等現(xiàn)代瀏覽器下面用這些標(biāo)簽固然可以，那么我在IE6/7/8下用這些標(biāo)簽會有什么效果了呢，下面與大家分享下動(dòng)手測試的結(jié)果
識別html5標(biāo)簽：
html5添加了許多語義化的標(biāo)簽，比如<nav></nav>,<aside></aside>,<article></article>什么的，當(dāng)時(shí)看到這些標(biāo)簽的時(shí)候心想html5估計(jì)很多老式IE瀏覽器都不支持，也沒多大重視，今天早上在群里面看到這些標(biāo)簽的討論，心里頓時(shí)冒出一個(gè)疑惑，我在chrome等現(xiàn)代瀏覽器下面用這些標(biāo)簽固然可以，那么我在IE6/7/8下用這些標(biāo)簽會有什么效果了呢。于是立馬動(dòng)手測試。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>nav</nav>
<aside>aside</aside>
</body>
</html>
效果出來了，不用想也知道這幾個(gè)瀏覽器是不認(rèn)這幾個(gè)標(biāo)簽的，因此只是出現(xiàn)了一行文本：nav aside;
而現(xiàn)代瀏覽器下這兩個(gè)是正常的塊級標(biāo)簽，因此有換行。
我冒著試試看的心理，給nav和aside標(biāo)簽加上樣式試試。
nav {color: red;}
aside {color:blue;}
自然也不行，那么我加上class呢，并添加樣式呢。同樣宣告失敗。
網(wǎng)上搜了一番，原因是那些老式瀏覽器誕生的時(shí)候壓根兒還沒有這些標(biāo)簽?zāi)兀匀痪筒徽J(rèn)了。解決辦法也是有的，那就是在head里面添加如下腳本，讓瀏覽器識別到這是一個(gè)標(biāo)簽，這樣css也就能順利渲染了。
document.createElement("nav");
document.createElement("aside");
不過這樣寫了之后字體顏色是變了，仍然是內(nèi)聯(lián)元素，所有還得把樣式定義為display:block，不過這些css代碼很多reset.css里已經(jīng)有了。
為了支持所有新增html5標(biāo)簽，你可以這么寫
function html5(){
var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
for(i in html5tag) {
document.createElement(html5tag[i]);
}
}
或者調(diào)用谷歌代碼庫：
<!--[if lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
也有寫作
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
這個(gè)html5.js功能應(yīng)該更強(qiáng)大，不僅僅是讓老式瀏覽器識別html5標(biāo)簽?zāi)敲春唵巍?
聯(lián)想：自定義標(biāo)簽
既然這些個(gè)html5里的標(biāo)簽對于老式瀏覽器來說都是“陌生人”，那么我們自己創(chuàng)造出來的標(biāo)簽性質(zhì)上也是陌生人，于是我有加了一行代碼。
<my>my</my>
<you>you</you>
my {font-size: 30px;}
you {font-weight: bold;}
奇葩的是chrome,FF,safari竟然能識別，并且也加上了樣式。
但是在IE下面同樣要用createElement創(chuàng)建之后才能識別。
html5 DOCTYPE：
以前一直傻乎乎的以為html5里面那行簡潔的<!doctype html>文檔頭也是只能用在支持html5的瀏覽器里的，今天查了下資料才發(fā)現(xiàn)大錯(cuò)特錯(cuò)，自己對文檔頭的理解不夠啊。這個(gè)是向下兼容的。HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現(xiàn)代瀏覽器和IE6/7/8等瀏覽器都進(jìn)入(準(zhǔn))標(biāo)準(zhǔn)模式，你可能會奇怪IE6/7居然也可以支持HTML5 Doctype，事實(shí)上，IE是只要doctype符合這種格式，都會進(jìn)入標(biāo)準(zhǔn)模式。
html5添加了許多語義化的標(biāo)簽，比如<nav></nav>,<aside></aside>,<article></article>什么的，當(dāng)時(shí)看到這些標(biāo)簽的時(shí)候心想html5估計(jì)很多老式IE瀏覽器都不支持，也沒多大重視，今天早上在群里面看到這些標(biāo)簽的討論，心里頓時(shí)冒出一個(gè)疑惑，我在chrome等現(xiàn)代瀏覽器下面用這些標(biāo)簽固然可以，那么我在IE6/7/8下用這些標(biāo)簽會有什么效果了呢。于是立馬動(dòng)手測試。
復(fù)制代碼
代碼如下:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>nav</nav>
<aside>aside</aside>
</body>
</html>
效果出來了，不用想也知道這幾個(gè)瀏覽器是不認(rèn)這幾個(gè)標(biāo)簽的，因此只是出現(xiàn)了一行文本：nav aside;
而現(xiàn)代瀏覽器下這兩個(gè)是正常的塊級標(biāo)簽，因此有換行。
我冒著試試看的心理，給nav和aside標(biāo)簽加上樣式試試。
復(fù)制代碼
代碼如下:nav {color: red;}
aside {color:blue;}
自然也不行，那么我加上class呢，并添加樣式呢。同樣宣告失敗。
網(wǎng)上搜了一番，原因是那些老式瀏覽器誕生的時(shí)候壓根兒還沒有這些標(biāo)簽?zāi)兀匀痪筒徽J(rèn)了。解決辦法也是有的，那就是在head里面添加如下腳本，讓瀏覽器識別到這是一個(gè)標(biāo)簽，這樣css也就能順利渲染了。
復(fù)制代碼
代碼如下:document.createElement("nav");
document.createElement("aside");
不過這樣寫了之后字體顏色是變了，仍然是內(nèi)聯(lián)元素，所有還得把樣式定義為display:block，不過這些css代碼很多reset.css里已經(jīng)有了。
為了支持所有新增html5標(biāo)簽，你可以這么寫
復(fù)制代碼
代碼如下:function html5(){
var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
for(i in html5tag) {
document.createElement(html5tag[i]);
}
}
或者調(diào)用谷歌代碼庫：
復(fù)制代碼
代碼如下:<!--[if lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
也有寫作
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
這個(gè)html5.js功能應(yīng)該更強(qiáng)大，不僅僅是讓老式瀏覽器識別html5標(biāo)簽?zāi)敲春唵巍?
聯(lián)想：自定義標(biāo)簽
既然這些個(gè)html5里的標(biāo)簽對于老式瀏覽器來說都是“陌生人”，那么我們自己創(chuàng)造出來的標(biāo)簽性質(zhì)上也是陌生人，于是我有加了一行代碼。
復(fù)制代碼
代碼如下:<my>my</my>
<you>you</you>
復(fù)制代碼
代碼如下:my {font-size: 30px;}
you {font-weight: bold;}
奇葩的是chrome,FF,safari竟然能識別，并且也加上了樣式。
但是在IE下面同樣要用createElement創(chuàng)建之后才能識別。
html5 DOCTYPE：
以前一直傻乎乎的以為html5里面那行簡潔的<!doctype html>文檔頭也是只能用在支持html5的瀏覽器里的，今天查了下資料才發(fā)現(xiàn)大錯(cuò)特錯(cuò)，自己對文檔頭的理解不夠啊。這個(gè)是向下兼容的。HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現(xiàn)代瀏覽器和IE6/7/8等瀏覽器都進(jìn)入(準(zhǔn))標(biāo)準(zhǔn)模式，你可能會奇怪IE6/7居然也可以支持HTML5 Doctype，事實(shí)上，IE是只要doctype符合這種格式，都會進(jìn)入標(biāo)準(zhǔn)模式。
相關(guān)文章
html5實(shí)現(xiàn)完美兼容各大瀏覽器的播放器
這篇文章主要介紹了html5實(shí)現(xiàn)完美兼容各大瀏覽器的播放器,需要的朋友可以參考下2014-12-262013年五大主流瀏覽器 HTML5 與 CSS3 兼容性大比拼
這篇文章主要介紹了2013年五大主流瀏覽器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以參考下2014-11-18
HTML5實(shí)現(xiàn)的粘瀏覽器小泥塊特效源碼
這款HTML5動(dòng)畫非?？蓯郏瑒?dòng)畫的主角是一款粘人的小泥塊，用鼠標(biāo)拖動(dòng)泥塊，泥塊即可粘住瀏覽器，讓后一點(diǎn)點(diǎn)掉落下來。而完成這樣的HTML5動(dòng)畫，我們只需一張圖片和一系列CSS32014-10-31- 本文主要為大家介紹了HTML5新增元素如何兼容舊瀏覽器的解決辦法，需要的朋友可以參考下2014-05-09
讓ie瀏覽器成為支持html5的瀏覽器的解決方法(使用html5shiv)
越來越多的站點(diǎn)開始使用HTML5標(biāo)簽。但是目前的情況是還有很多人在使用IE6，IE7，IE8。這里提供一種讓ie瀏覽器支持html5的方法,需要的朋友可以參考下2014-04-08讓你的HTML5&CSS3網(wǎng)站在微軟的瀏覽器中也能運(yùn)行
很多朋友都在想辦法想辦法兼容早期的IE瀏覽器，下面有三種方法能快捷輕松的讓你的HTML5&CSS3網(wǎng)站在微軟的主要瀏覽器中也能神奇的運(yùn)行2014-03-31- 讓IE(包括IE6)支持HTML5元素，需要在HTML頭部添加一個(gè)簡單的document.createElement聲明，具體祥看本文2014-03-12
- 學(xué)習(xí)w3c是看到一個(gè)檢測您的瀏覽器是否支持 HTML5 視頻的方法，在這里與大家分享下，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-28
html5中canvas學(xué)習(xí)筆記2-判斷瀏覽器是否支持canvas
判斷瀏覽器是否支持canvas,本人搜集整理了一些使用方法，感興趣的朋友可以了解下2013-01-06360圖片放大鏡怎么關(guān)? 360瀏覽器圖片放大鏡關(guān)閉圖文方法詳解
360圖片放大鏡怎么關(guān)閉?很多朋友想知道360瀏覽器關(guān)掉圖片放大鏡方法，其實(shí)很簡單哦~下文將會為大家介紹，如果你不喜歡360放大鏡功能的話，就請參考下文來操作吧2014-11-06
