萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 在IE6/7/8下識別html5標簽(讓老式浏覽器識別html5)
在IE6/7/8下識別html5標簽(讓老式浏覽器識別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">
<title>Document</title>
</head>
<body>
<nav>nav</nav>
<aside>aside</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裡的標簽對於老式浏覽器來說都是“陌生人”，那麼我們自己創造出來的標簽性質上也是陌生人，於是我有加了一行代碼。
<my>my</my>
<you>you</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符合這種格式，都會進入標准模式。
