HTML5 之瀏覽器支援介紹
導讀 |
現代的瀏覽器都支援 HTML5。
此外,所有瀏覽器,包括舊的和最新的,對無法識別的元素會作為內聯元素自動處理。 |
正因為如此,你可以 "教會" 瀏覽器處理 "未知" 的 HTML 元素。
甚至你可以教會 IE6 (Windows XP 2001) 瀏覽器處理未知的 HTML 元素。
將 HTML5 元素定義為塊元素
HTML5 定了 8 個新的 HTML 語義(semantic) 元素。所有這些元素都是 塊級 元素。
為了能讓舊版本的瀏覽器正確顯示這些元素,你可以設定 CSS 的 display 屬性值為 block:
例項
header, section, footer, aside, nav, main, article, figure { display: block; }
為 HTML 新增新元素
你可以為 HTML 新增新的元素。
該例項向 HTML 新增的新的元素,併為該元素定義樣式,元素名為 :
例項
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>為 HTML 新增新元素</title><script>document.createElement("myHero")</script><style>myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px;}</style> </head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p><myHero>我的第一個新元素</myHero></body></html>
JavaScript 語句 document.createElement("myHero") 是為 IE 瀏覽器新增新的元素。
Internet Explorer 瀏覽器問題
你可以使用以上的方法來為 IE 瀏覽器新增 HTML5 元素,但是:
Note Internet Explorer 8 及更早 IE 版本的瀏覽器不支援以上的方式。
我們可以使用 Sjoerd Visscher 建立的 "HTML5 Enabling JavaScript", " shiv" 來解決該問題:
<!--[if lt IE 9]> <script src=" <![endif]-->
以上程式碼是一個註釋,作用是在 IE 瀏覽器的版本小於 IE9 時將讀取 html5.js 檔案,並解析它。
注意:國內使用者請使用本站靜態資源庫(Google 資源庫在國內不穩定):
<!--[if lt IE 9]> <script src=" <![endif]-->
針對IE瀏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別,這些新元素不能作為父節點包裹子元素,並且不能應用CSS樣式。
完美的 Shiv 解決方案
例項
<!DOCTYPE html><html><head><meta charset="utf-8"><title>渲染 HTML5</title> <!--[if lt IE 9]> <script src=" <![endif]--></head> <body><h1>我的第一篇文章</h1><article>菜鳥教程 —— 學的不僅是技術,更是夢想!!!</article></body></html>
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2673218/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 瀏覽器核心介紹瀏覽器
- 瀏覽器fuzz框架介紹瀏覽器框架
- 檢測瀏覽器是否支援HTML5功能瀏覽器HTML
- Edge瀏覽器的前世今生 史上最全Edge瀏覽器介紹瀏覽器
- 微軟介紹Edge瀏覽器新特性,支援筆記同步DROP等微軟瀏覽器筆記
- 瀏覽器快取機制介紹瀏覽器快取
- 怎麼檢測瀏覽器劫持,瀏覽器劫持的方法介紹瀏覽器
- 如何判斷當前瀏覽器是否支援html5瀏覽器HTML
- 谷歌瀏覽器怎麼清除快取 chrome瀏覽器清理快取方法介紹谷歌瀏覽器快取Chrome
- Blazor Bootstrap 元件庫瀏覽器通知元件介紹Blazorboot元件瀏覽器
- 瀏覽器核心的種類簡單介紹瀏覽器
- 8款瀏覽器對HTML5支援評測瀏覽器HTML
- Web字型格式介紹及瀏覽器相容性一覽Web瀏覽器
- 主流瀏覽器核心介紹(前端開發值得了解的瀏覽器核心歷史)瀏覽器前端
- HTML5支援所有瀏覽器的SHIV解決方案HTML瀏覽器
- 如何檢測您的瀏覽器是否支援HTML5視訊瀏覽器HTML
- 前端優化:瀏覽器快取技術介紹前端優化瀏覽器快取
- 實現瀏覽器跨域解決方案介紹瀏覽器跨域
- 瀏覽器渲染頁面過程簡單介紹瀏覽器
- firefox火狐瀏覽器介紹及下載地址Firefox瀏覽器
- 谷歌瀏覽器相容模式怎麼設定 chrome瀏覽器相容模式切換方法介紹谷歌瀏覽器模式Chrome
- onscroll事件的瀏覽器支援事件瀏覽器
- javascript for in語句瀏覽器相容問題簡單介紹JavaScript瀏覽器
- getBoundingClientRect()瀏覽器相容問題簡單介紹GCclient瀏覽器
- js獲取瀏覽器相關資訊簡單介紹JS瀏覽器
- [譯] 瀏覽器中 CSS 支援指南瀏覽器CSS
- getElementsByClassName()方法的瀏覽器支援版本瀏覽器
- 瀏覽器原生支援平滑滾動瀏覽器
- 如何讓IE8和IE8以下瀏覽器支援HTML5瀏覽器HTML
- 如何讓低版本IE瀏覽器支援HTML5和CSS3瀏覽器HTMLCSSS3
- 實現微信內建瀏覽器線上支付簡單介紹瀏覽器
- 相容各個瀏覽器的scrolltop屬性簡單介紹瀏覽器
- 瀏覽器端繪圖技術SVG VML Canvas WebGL介紹瀏覽器繪圖SVGCanvasWeb
- html5多終端瀏覽器相容HTML瀏覽器
- 瀏覽器之渲染引擎瀏覽器
- 瀏覽器之我見瀏覽器
- 如何判斷當前瀏覽器是否支援html5的video標籤瀏覽器HTMLIDE
- vue填坑之解決部分瀏覽器不支援pushState方法Vue瀏覽器