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

2024-07-11 08:28:40

字體：大中小

來源：轉載

供稿：網友

識別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]);
}
}

或者調用谷歌代碼庫：

復制代碼

代碼如下:

也有寫作

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

上一篇：firefox不顯示border通過清除float便可解決

下一篇：如何處理小圖標與文字混排的多種解決方案