HTML5 Shiv--解決IE(IE6/IE7/IE8)不相容HTML5標簽的方法

来源:http://www.cnblogs.com/qqing/archive/2017/02/05/6368229.html
-Advertisement-
Play Games

HTML5的語義化標簽以及屬性,可以讓開發者非常方便地實現清晰的web頁面佈局。大多數瀏覽器基本相容html5,但目前來說ie6/ie7/ie8還不相容html5標簽,所以需要javascript處理,讓其進行相容 方法一:javascript code 如果是IE9以下的IE瀏覽器將創建HTML5 ...


HTML5的語義化標簽以及屬性,可以讓開發者非常方便地實現清晰的web頁面佈局。大多數瀏覽器基本相容html5,但目前來說ie6/ie7/ie8還不相容html5標簽,所以需要javascript處理,讓其進行相容

方法一:javascript code

<!--[if lt IE9]> 
<script> 
  (function() {
   	if (!/*@cc_on!@*/0) return;
  	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(', ');
  	var i= e.length;
   	while (i--){
    	  document.createElement(e[i])
   	} 
 })() 
</script>
<![endif]-->

如果是IE9以下的IE瀏覽器將創建HTML5標簽, 這樣非IE瀏覽器就會忽視這段代碼,也就不會有無謂的http請求了。

方法二:使用Google的html5shiv包

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 (ps:打開該鏈接的網頁需要FQ,另外即使我FQ了,打開網頁顯示的是No dialers left to try on pass 0)

 由於國內google的伺服器訪問卡,建議調用國內的cdn

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

  該鏈接親測可用

js部分寫完了,但還有一個小問題,如果碰到ie6/7/8 禁用腳本的用戶,那麼就變成了無樣式的"白板"網頁,我們該怎麼解決呢?

我們可以參照facebook的做法,即引導用戶進入帶有noscript標識的 “/?_fb_noscript=1”頁面,用 html4 標簽替換 html5 標簽,這要比為了保持相容性而寫大量 hack 的做法更輕便一些。

<!--[if lte IE 8]> 
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <div class="ie-noscript-warning">您的瀏覽器禁用了腳本,請<a href="">查看這裡</a>來啟用腳本!或者<a href="/?noscript=1">繼續訪問</a>.
   </div>
</noscript>
<![endif]-->

這樣可以引導用戶開啟腳本,或者直接跳轉到HTML4標簽設計的界面。

 

 

 

 


 

  js部分解決了,到css部分。css需初始化化一下這些新的的元素,方便佈局設置

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block} 

  

註:好記性不如爛筆頭,總結開發時會遇到的一些實用問題,等如果再遇到可以翻出來看,內容比較基礎,如有雷同,純屬巧合

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • A 調用攝像頭拍照,自定義裁剪編輯頭像 【新錄針對本系統的視頻教程,手把手教開發一個模塊,快速掌握本系統】B 集成代碼生成器 [正反雙向](單表、主表、明細表、樹形表,開發利器)+快速構建表單; 技術:313596790 freemaker模版技術 ,0個代碼不用寫,生成完整的一個模塊,帶頁面、建表 ...
  • 無阻塞載入 把js放在head里,瀏覽器是怎麼去執行它的呢,是按順序載入還是並行載入呢?在舊的瀏覽器下,都是按照先後順序來載入的,這就保證了載入的js依賴不會發生問題。但是少部分新的瀏覽器已經開始允許並行載入js了,也就是說可以同時下載js文件,但是還是按先後順序執行文件的。 下載是非同步的沒問題,但 ...
  • 通常來說,javascript中的對象就是一個指向prototype的指針和一個自身的屬性列表。javascript創建對象時採用了寫時複製的理念。 只有構造器才具有prototype屬性,原型鏈繼承就是創建一個新的指針,指向構造器的prototype屬性。 prototype屬性之所以特別,是因為 ...
  • [1]效果演示 [2]點陣數字 [3]時鐘實現 [4]隨機拋物線 [5]粒子動畫 [6]公告欄擴展 ...
  • 一、題目  用JS代碼求出頁面上一個元素的最終的background color,不考慮IE瀏覽器,不考慮元素float情況。 二、題目解析   1.考察底層JavaScript基礎  前端開發,日常最常接觸的就是頁面樣式的編寫。而擺脫jQuery等工具庫,用原生js獲 ...
  • css3彈性盒子模型,box-flex,box-orient,box-direction,box-align與box-pack,box-lines,box-ordinal-group ...
  • 當使用js時我們可以使用timestamp = (new Date()).valueOf();直接獲取當前時區時間點的時間戳。註意:js中時間戳的單位是毫秒,而php中則是秒 ...
  • 轉換字元串 你可以轉換一個數字,布爾值,或一個字元串的對象: 將字元串分割成多個子字元串 為了區分一個字元串轉換為一個子字元串數組,你可以使用的split()方法: 1 var myString = "coming,apart,at,the,commas"; 2 var substringArray ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...