在不支持HTML5的瀏覽器器中使用HTML5

原文鏈接https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#%E5%9C%A8%E4%B8%8D%E6%94%AF%E6%8C%81HTML5%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E5%99%A8%E4%B8%AD%E4%BD%BF%E7%94%A8HTML5


分節(jié)和標(biāo)題元素應(yīng)該在大部分的不支持HTML5的瀏覽器中工作。盡管不支持,但不必使用特殊的DOM接口。僅僅只需要一個(gè)特殊的CSS樣式,因?yàn)槲粗啬J(rèn)會(huì)樣式化為display:inline:

section,article,aside,footer,header,nav,hgroup{

display:block

}

當(dāng)然web開(kāi)發(fā)者可以改變上面的樣式結(jié)構(gòu),但是要記住的是在不支持HTML5瀏覽器中,這些元素默認(rèn)的樣式是與預(yù)期的樣式是不同的。還要注意的是<time>元素并沒(méi)有在這些元素中,因?yàn)槠錁邮皆诓恢С諬TML5和兼容HTML5的瀏覽器中的表現(xiàn)是相同的。

然而這種方法有自己的局限性,因?yàn)橐恍g覽器并不允許樣式化不支持的元素。這種情形出現(xiàn)在IE8及IE8以前的瀏覽器中,需要一個(gè)特殊腳本才行:

<!--[if lt IE 9]>

<script>

????document.createElement("header" );

????document.createElement("footer" );

????document.createElement("section");

????document.createElement("aside" );

????document.createElement("nav" );

????document.createElement("article");

????document.createElement("hgroup" );

????document.createElement("time" );

</script>

<![endif]-->


這段腳本表示,當(dāng)在ie8(及ie8以前)的情況下,應(yīng)該允許腳本的運(yùn)行以合適地展示HTML5分節(jié)和標(biāo)題元素。如果禁用了腳本,則不會(huì)顯示,可能會(huì)出問(wèn)題因?yàn)檫@些元素定義整個(gè)頁(yè)面的結(jié)構(gòu)。為了預(yù)防這種情況,我們需要加上<noscript>標(biāo)簽。

<noscript>

????<strong>Warning !</strong>

????Because your browser does not support HTML5, some elements are simulated using JScript. Unfortunately your browser has disabled scripting. Please enable it in order to display this page.

</noscript>

于是形成了如下的代碼,允許HTML5節(jié)段和標(biāo)題元素在不支持HTML5的瀏覽器中展示,即使是ie8(ie8以下版本)也在禁用腳本的情況下有了合適的反饋。

<!--[if lt IE 9]>

? <script>

? ? document.createElement("header" );

? ? document.createElement("footer" );

? ? document.createElement("section");

? ? document.createElement("aside"? );

? ? document.createElement("nav"? ? );

? ? document.createElement("article");

? ? document.createElement("hgroup" );

? ? document.createElement("time"? );

? </script>

? <noscript>

? ? <strong>Warning !</strong>

? ? Because your browser does not support HTML5, some elements are simulated using JScript.

? ? Unfortunately your browser has disabled scripting. Please enable it in order to display this page.

? </noscript>

<![endif]-->

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,824評(píng)論 1 45
  • 前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱: HTML&CSS: 對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,780評(píng)論 0 25
  • 前端開(kāi)發(fā)面試題 <a name='preface'>前言</a> 只看問(wèn)題點(diǎn)這里 看全部問(wèn)題和答案點(diǎn)這里 本文由我...
    自you是敏感詞閱讀 904評(píng)論 0 3
  • 1. 介紹 瀏覽器可能是最廣泛使用的軟件。本書(shū)將介紹瀏覽器的工作原理。我們將看到,當(dāng)你在地址欄中輸入google....
    康斌閱讀 2,163評(píng)論 7 18
  • 簡(jiǎn)書(shū)更文5天,有2位伙伴打賞,太開(kāi)心了!給了我莫大的激勵(lì)和繼續(xù)堅(jiān)持“一天分享一本繪本”的信心! 《讓我安靜5分鐘》...
    南子手記閱讀 475評(píng)論 2 2

友情鏈接更多精彩內(nèi)容