DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 在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符合這種格式,都會進入標准模式。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved