越來越多的站點開始使用 html5 標簽,但是目前的情況是還有很多人在使用ie6、ie7、ie8。為了讓所有瀏覽者都可以正常的訪問,解決方案有下面兩個:
1.為網站創建多套模板,通過程序對user-agent的判斷為不同的瀏覽器用戶顯示不同的頁面,例如:優酷網。
2.使用javascript來使不支持html5的瀏覽器支持html標簽。
針對ie比較好的解決方案是html5shiv。htnl5shiv主要解決html5提出的新的元素不被ie6-8識別,這些新元素不能作為父節點包裹子元素,并且不能應用css樣式。讓css 樣式應用在未知元素上只需執行 document.createelement(elementname) 即可實現。html5shiv就是根據這個原理創建的。
html5shiv的使用非常的簡單,考慮到ie9是支持html5的,所以只需要在頁面head中添加如下代碼即可:
復制代碼
代碼如下:
<!-–[if lt ie 9]--><script src= http://html5shiv.googlecode.com/svn/trunk/html5.js ></script ><!--[endif]–- >
html5shiv官方網址:http://code.google.com/p/html5shiv/
下面是一些補充:
當然包括本人blog在內。關于html5不得不提ie,在蘋果、google、opera和mozilla等主流瀏覽器廠商積極參與新版本html標準的制定和推廣時,微軟卻對html 5規范不屑一顧。然而微軟近期才表態要在ie中支持html 5,以致到今天為止的ie8及以下是無法支持html5標簽的。但在sitepoint找到了讓ie支持html5辦法。
以下是在的ie 8顯示的例子,未作處理前:
讓ie(包括ie6)支持html5元素,我們需要在html頭部添加以下javascript,這是一個簡單的document.createelement聲明,利用條件注釋針對ie在對象中創建對應的節點。
復制代碼
代碼如下:
<!--[if ie]>
<script>
document.createelement(header);
document.createelement(footer);
document.createelement(nav);
document.createelement(article);
document.createelement(section);
</script>
<![endif]-->
添加以上代碼后,在ie8中顯示的效果如下:
sitepoint例子中創建節點的javascript代碼似乎過于臃腫,在smashingmagazine提供的代碼似乎更簡潔。
演示如下
提示:您可以先修改部分代碼再運行
代碼如下:
<!--[if ie]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = header,footer,nav,article,section.split(','),i=e.length;while(i--){document.createelement(e[i])}})()
</script>
<![endif]-->
html5在默認情況下表現為內聯元素,對這些元素進行布局我們需要利用css手工把它們轉為塊狀元素,如下例:
代碼如下:
header, footer, nav, section, article {
display:block;
}
官宣丨這些違規內容,微信不姑息網站前端制作之swiper插件之OB模式(前端制作招聘)學習網站優化更重要的在于實踐自己做網站需要關注哪些問題企業網站建設的目的你明確了嗎?定制網站:移動端網站建設要考慮哪些問題網站排名受影響的因素有哪些呢?企業營銷型網站的設計標準解析