瀏覽器不支持HTML5

時間 2019-11-11

原文原文鏈接

有些瀏覽器並不支持HTML5中的新增元素，如IE8或更早版本。想要應用樣式，能夠頭部標記<head>中加入下面JavaScript代碼

 1 <html>
 2 <head>
 3 <meta charset=uft-8"/>
 4 <style> 
 5 header{ 
 6     color: red;
 7     width: 500px; 
 8 }
 9 </style>
10 <script>document.createElement("header")</script>
11 </head>
12 <body>
13 <header>Hello world!</header>
14 </body>
15 </html>

對重點就是document.createElement。考慮各個瀏覽器兼容性不一樣，能夠對上面JS代碼進行優化，即便用條件語句包含JS代碼php

IE9如下版本的IE將建立HTML5標籤，非IE瀏覽器會忽略這段代碼，所以不會發生http請求，也就不影響網頁執行效率。css

 1 <script>
 2 (function() {
 3 if (!
 4 /*@cc_on!@*/
 5 0) return;
 6 var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
 7 var i= e.length;
 8 while (i--){
 9 document.createElement(e[i])
10 }
11 })()
12 </script>

最後在css裏面加上這段：html

/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是讓這些html5標籤成塊狀，像div那樣。html5

另外還有種能讓IE識別那些新元素的途徑就是使用HTML5 shiv，html5shiv的使用很是的簡單，在你的網頁中引入Google的html5shiv包（已經寫好的直接可調用）在頁面head中便可web

1 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

必定要加在<head></head>裏調用 (由於瀏覽器必須先解釋了這個腳本才能解析後面的html5標籤，因此不能放在頁面底部）canvas

下載地址: http://html5shiv.googlecode.com/svn/trunk/html5.js 瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。