讓老式瀏覽器識別html5 在IE6/7/8下識別html5標簽

識別html5標簽:
html5添加了許多語義化的標簽 , 比如nav/nav,aside/aside,article/article什么的 , 當時看到這些標簽的時候心想html5估計很多老式IE瀏覽器都不支持,也沒多大重視,今天早上在群里面看到這些標簽的討論,心里頓時冒出一個疑惑,我在chrome等現代瀏覽器下面用這些標簽固然可以,那么我在IE6/7/8下用這些標簽會有什么效果了呢 。于是立馬動手測試 。

復制代碼代碼如下:
!doctype html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
/head
body
navnav/nav
asideaside/aside
/body
/html

效果出來了 , 不用想也知道這幾個瀏覽器是不認這幾個標簽的,因此只是出現了一行文本:nav aside;
而現代瀏覽器下這兩個是正常的塊級標簽,因此有換行 。
我冒著試試看的心理 , 給nav和aside標簽加上樣式試試 。

復制代碼代碼如下:
nav {color: red;}
aside {color:blue;}

自然也不行,那么我加上class呢,并添加樣式呢 。同樣宣告失敗 。
網上搜了一番,原因是那些老式瀏覽器誕生的時候壓根兒還沒有這些標簽呢 , 自然就不認了 。解決辦法也是有的,那就是在head里面添加如下腳本,讓瀏覽器識別到這是一個標簽,這樣css也就能順利渲染了 。

復制代碼代碼如下:
document.createElement("nav");
document.createElement("aside");

不過這樣寫了之后字體顏色是變了,仍然是內聯元素,所有還得把樣式定義為display:block,不過這些css代碼很多reset.css里已經有了 。
為了支持所有新增html5標簽,你可以這么寫

復制代碼代碼如下:
function html5(){
var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
for(i in html5tag) {
document.createElement(html5tag[i]);
}
}

或者調用谷歌代碼庫:

復制代碼代碼如下:
!--[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]--

這個html5.js功能應該更強大,不僅僅是讓老式瀏覽器識別html5標簽那么簡單 。
聯想:自定義標簽
既然這些個html5里的標簽對于老式瀏覽器來說都是陌生人,那么我們自己創造出來的標簽性質上也是陌生人,于是我有加了一行代碼 。

復制代碼代碼如下:
mymy/my
youyou/you


復制代碼代碼如下:
my {font-size: 30px;}
you {font-weight: bold;}

奇葩的是chrome,FF,safari竟然能識別,并且也加上了樣式 。
但是在IE下面同樣要用createElement創建之后才能識別 。
html5 DOCTYPE:
以前一直傻乎乎的以為html5里面那行簡潔的!doctype html文檔頭也是只能用在支持html5的瀏覽器里的,今天查了下資料才發現大錯特錯,自己對文檔頭的理解不夠啊 。這個是向下兼容的 。HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代瀏覽器和IE6/7/8等瀏覽器都進入(準)標準模式,你可能會奇怪IE6/7居然也可以支持HTML5 Doctype , 事實上,IE是只要doctype符合這種格式,都會進入標準模式 。

相關經驗推薦