您現在的位置是:電腦技術吧?>? 故障問題 ??>??怎么設置瀏覽器兼容性,瀏覽器兼容性問題匯總??>??正文詳情

怎么設置瀏覽器兼容性,瀏覽器兼容性問題匯總

南天青2019-11-08 14:01:50 人圍觀
簡介html瀏覽器兼容性隨著HTML5技術的普及和推廣,web開發界逐漸開始嘗試在RIA(富Internet應用)中使用HTML5。這種做法的主要優點是,開發者可以通過各種HTML5技瀏覽器兼容模式

隨著HTML5技術的普及和推廣,Web開發社區逐漸開始嘗試在RIA(富互聯網應用)中使用HTML5,這種實踐主要優勢在于開發人員能夠通過 HTML5的各種技術以一種前所未有的統一、簡潔、無插件依賴的方式實現炫目、復雜的Web應用,HTML5的優越性已經得到了開發社區的普遍認可。

不 過,就像其他Web技術誕生時的情況一樣,作為新生兒的HTML5在各種Web瀏覽器中的實現程度或者說平臺兼容性一直是Web開發人員的心病。

本文將介 紹Web瀏覽器對HTML5技術的兼容性,希望能夠幫助Web開發人員在應用HTML5技術時充分考慮到平臺差異性。

從2006年WHATWG和W3C決定合作制定HTML5標準以來(預計2012年成為候選標準),瀏覽器廠商都不甘落后,一直在努力實現更多的 HTML5技術,不過由于各個廠商的步伐不一,導致HTML5在瀏覽器中的實現程度參差不齊。

在這里我們將綜合兩種HTML5兼容性測試工具包 HTML5Test和Modernizr的測試結果來分析一下Web瀏覽器的支持程度。

考慮到HTML5標準的制定原則:新特性基于HTML、CSS、DOM 以及 JavaScript;減少對外部插件的需求(比如Flash);獨立于設備等,我們選取了HTML 5的幾項主要特性來評價瀏覽器系統。

  • 視頻播放標記video
  • 音頻播放標記audio
  • 繪圖標記canvas
  • 表單控件標記url、email等
  • 本地客戶端存儲瀏覽器(版本)選取由于目前市面上的瀏覽器品牌和版本繁多,我們難以覆蓋全部產品,因此在這里設定測試瀏覽器的選擇原則為:主流品牌、主流版本和最新版本(正式發布)。

    依據StatCounter發布的2011年2~3月份瀏覽器市場占有率統計分布情況,主流品牌如圖1所示。

    圖 1 主流瀏覽器分布圖從圖1 中可以看出, 微軟的I n t e r n e tExplorer以其混搭的IE6、IE7、IE8、IE9等多個版本占據了榜首,開源瀏覽器Firefox緊隨其后,其開放的體系結構也吸引了眾多優 秀插件,并成為Web開發人員的主要開發調試平臺。

    Google主推的Chrome后來居上,占據了第三名的位置。

    瀏覽器主流版本分布情況如圖2所示。

    圖2 瀏覽器主流版本分布圖再加上部分最新瀏覽器版本,我們選取的全部瀏覽器(版本)如表1所示。

    表1 測試瀏覽器

    HTML5兼容性分析視頻播放標記video在HTML5技術出現之前,大部分Web視頻播放是通過瀏覽器插件如Adobe Flash來實現,這要求客戶在觀看視頻之前安裝相應的組件。

    video標記的出現使開發人員不再依賴于特定第三方技術,下面的代碼片段播放了一個視頻文 件,設定了畫面的尺寸,并帶有控制按鈕(暫停/進度條等):

    video元素潛在地支持多種視頻格式,包括:

    • Ogg采用Theora視頻編碼和Vorbis音頻編碼的Ogg視頻文件;
    • MPEG4采用H.264視頻編碼和AAC音頻編碼的MPEG 4視頻文件;
    • WebM采用VP8視頻編碼和Vorbis音頻編碼的WebM視頻文件。

      這些視頻格式在HTML5最終標準的接納程度目前還在各方博弈之中,不過瀏覽器已經開始選擇性地支持Video標記了。

      表2是兼容性測試結果。

      表2 視頻標記video測試結果

      這里有幾點需要注意:

      • 最 新發布的I E 9 默認只支持MP EG4(H.264編碼)格式文件(支持硬件加速),如果安裝了WebM/VP8插件,可以支持WebM視頻格式。

      • Safari瀏覽器依靠QuickTime做視頻播放,所以Safari支持的視頻格式與QuickTime一致。

        請注 意:QuickTime在 Mac機上是預裝的,其默認支持的視頻格式是MPEG4,但在Windows系統上QuickTime需要手動安裝,也就是說在Windows上默認情況 下Safari是不支持所有視頻格式的,這一點需要Web開發人員了解。

      • Firefox 4.0還將支持WebM格式。

      • Chrome已經宣布不再支持MPEG格式的視頻。

      • Video元素有一個preload屬性,可能的值包括:
        • Auto當頁面加載后載入整個視頻;
        • Meta當頁面加載后只載入元數據;
        • None當頁面加載后不載入視頻。

          Web開發人員應該根據網頁的實際環境來選擇合適的預加載屬性以達到較好的前端性能。

          音頻播放標記audio與視頻標記vidio類似,音頻播放標記audio也是HTML5標準引入的元素,下面的代碼播放了一段音頻,帶有控制按鈕:

          audio潛在地支持多種音頻格式,包括Oggvorbis、MP3、AAC、wav等,不同瀏覽器對audio標記的支持程度表3所示。

          表3 音頻標記audio測試結果

          有幾點需要說明:

          • 因為存在包含關系,所以音頻標記auido的情況基本與video的結果保持一致;
          • IE8對video和audio標記都不支持,IE9剛剛引入這些元素;
          • audio元素同樣具有preload屬性,注意正確設置屬性值。

            繪圖標記canvas在Web 2.0的世界里,炫目的圖形是必不可少的組成部分。

            HTML5引入的canvas元素支持Web開發人員通過JavaScript在頁面上繪制線條、圖形、添加文字和圖像等。

            下面的代碼片段在頁面上簡單繪制了一個藍色矩形:

            Canvas的測試結果如表4所示。

            表4 繪圖標記canvas測試結果

            我們欣喜地看到,各種瀏覽器對canvas的支持度非常高,對于IE8的限制,可以通過開源項目ExplorerCanvas來解決,只需要兩步操作:

            • 包含js文件

            • 直接包含canvas元素或者動態創建它:

              Form 2.0表單元素對于企業級Web應用來說,表單控件是最重要的頁面元素之一。

              在HTML 5之前,各種類型的表單只能由開發人員通過復雜的屬性設置和限制條件(通過腳本計算)來完成。

              制定中的HTML 5標準引入了一系列分類清晰、功能完善的表單控件標記,包括email、url、number、range、search、color等,還有表單屬性 autocomplete、autofocus等。

              這里提供一個簡單例子,用戶填寫電子郵箱(自動檢測格式正確與否)和個人主頁(自動檢測格式正確與否) 等,然后提交給后臺系統:

              由于HTML5引入的表單控件、屬性比較多,這里選取了部分進行了測試,如表5所示。

              表5 部分表單元素測試結果

              幾點說明:

              • Firefox 4.0將開始支持email、url等表單元素;
              • 自動填充已經作為許多瀏覽器的一項基本功能存在,與HTML 5標準的autocomplete屬性需要區別開。

                本地客戶端存儲Web開發人員經常通過cookie管理客戶信息,但是當數據量比較大時,這種方法相對低效,一方面是因為cookie存在大小限制,另一方面每次都通過網絡請求來傳遞。

                HTML 5引入兩種新的存儲方式:

                • localStorage沒有時間限制的數據存儲
                • sessionStorage針對session的數據存儲

                  下面的例子分別使用LocalStorage和SessionStorge實現了簡單計數器,結果如表6所示。

                  表6 本地客戶單存儲測試結果

                  這項功能對Web開發人員來說非常強大,我們來看一下瀏覽器對sessionStorage和所有測試的瀏覽器都實現了HTML5的本地客戶端存儲 標記! 不過,這里要提一下安全性,Web開發人員在使用這些元素時,要時刻謹記存儲在客戶端的數據可能會被授權使用瀏覽器的其他人查看甚至修改,所以需要注意保 存敏感信息。

                  結束語本文介紹了一些主流瀏覽器對部分HTML5技術的兼容性,一言以蔽之參差不齊,Web開發人員在嘗試采用HTML5技術時,一方面會為其強大的表現力而激動,另一方面也會因為各瀏覽器的兼容性測試而煩惱,希望本文能夠讓大家對幾個關鍵技術的支持程度有基本的了解。

                  版權聲明:本文由 南天青 整理編輯。

                  原標題:ie瀏覽器兼容性設置,瀏覽器的兼容性

                  轉載注明出處:http://www.dn9ww09s.icu/fault/11586.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦關不了機是怎么回事,臺式電腦關不了機是怎么回事

    電腦關不了機是怎么回事,臺式電腦關不了機是怎么回事 相關圖片電腦卡了關不了機怎么辦在我們的日常生活中,計算機是一種非常常見的工具。在長時間使用電腦后,我們會發現電腦或多或少有問題。沒有用戶,計算機就不能關機。我們只能強行關...

  • oppo怎么強制恢復出廠,edius卸載清理工具

    oppo怎么強制恢復出廠,edius卸載清理工具 相關圖片卸載下載對于很多從Windows平臺切換到Mac平臺的用戶來說,僅僅觸摸系統還是有很多問題的。但是,他們在蘋果電腦上找不到卸載程序,也不知道如何刪除應用程序。在Mac上未來教育win...

  • 什么是交互設計師,交互設計師

    什么是交互設計師,交互設計師 相關圖片交互設計師前景有些設計師,特別是像我這樣沒有多少實踐經驗的新人,沒有形成系統的分析方法。在進行業務分析時,它們將是分散的。這樣的分析結果很難設計出來,也很難與其他...

  • 電腦死機怎么辦?,電腦死機按什么都沒用

    電腦死機怎么辦?,電腦死機按什么都沒用 相關圖片電腦老是死機現在電腦基本上是每個家庭都必須擁有的家用電器,當電腦在家里上網崩潰時,或多或少會帶來一些麻煩和疑慮。有些用戶不能移動到計算機商店。他們可以隨意修理,幾...

  • 應用圖標,圖標

    應用圖標,圖標 相關圖片桌面圖標不見了本文是對弗林托設計團隊設計師彼得諾威爾的采訪。在采訪中,彼得介紹了他是如何設計弗林托的圖標的,以及弗林托團隊最近就弗林托用戶界面圖標背后的設計過程采...

  • 如何解決電腦內存不足,如何解決電腦內存不足問題

    如何解決電腦內存不足,如何解決電腦內存不足問題 相關圖片電腦虛擬內存不足怎么解決在使用電腦的過程中,系統會自動下載一些垃圾文件。過了很長一段時間,電腦經常會提示內存不足。我能做什么?有人說我可以更換更大的內存模塊或直接...

  • overflow:hidden,overflow屬性hidden

    overflow:hidden,overflow屬性hidden 相關圖片address overflow備注:使用溢出:隱藏將影響列表樣式,即當UL中Li的溢出被隱藏時,列表樣式不起作用,不顯示以前的點、圓和其他樣式,并添加樣式:UL或Li中的列表樣式POSoverflow...

  • 聯想筆記本fn鍵怎么取消,筆記本的fn鍵設置

    聯想筆記本fn鍵怎么取消,筆記本的fn鍵設置 相關圖片筆記本取消fn功能鍵大多數筆記本電腦都有FN鍵,FN鍵是一個可以起輔助作用的鍵。按住FN鍵并按功能鍵可以起到功能鍵的作用。我覺得FN鍵很麻煩,特別是對于喜歡在筆記本電腦上玩游戲...

  • css常見問題,css兼容問題

    css常見問題,css兼容問題 相關圖片css兼容一。檢查HTML元素是否拼寫錯誤,結束標記是否被遺忘。即使是有經驗的用戶也經常在div的嵌套中出錯。你可以使用Dreamweaver的驗證來檢查第二個錯誤,檢查css浮動的特點...

  • 如何安裝聯想硬盤保護系統,聯想硬盤保護系統安裝

    如何安裝聯想硬盤保護系統,聯想硬盤保護系統安裝 相關圖片聯想硬盤保護系統win10了解聯想電腦的資深人士都知道,在聯想電腦中,附帶了聯想的硬盤保護系統,需要我們自己安裝在電腦中。然而,由于安裝步驟復雜,很多人仍然不知道如何正確...

熱評文章

  • 怎么調屏幕亮度,屏幕亮度調節

    怎么調屏幕亮度,屏幕亮度調節 相關圖片w7怎么調節屏幕亮度很多網友認為電腦顯示器的亮度不是太亮就是太暗。他們想調整屏幕的亮度,但有些用戶找不到調整顯示器亮度的方法。計算機屏幕的亮度也關系到計算機的節能降耗...

  • 文字豎排,怎么讓文字豎排

    文字豎排,怎么讓文字豎排 相關圖片豎排文字怎么設置有時,我們需要在網頁的某個區域垂直排列、垂直排列和水平排列文本。當然,我們已經習慣了。對于垂直排列,我們暫時找不到主意。哈哈,就跟水平排列一樣簡單...

  • 電腦開機進不去系統,電腦開機進不了系統怎么辦

    電腦開機進不去系統,電腦開機進不了系統怎么辦 相關圖片開機進不去系統隨著互聯網的發展,我們離不開計算機,但是在使用計算機的過程中,我們會遇到一些問題。漸漸地,一些用戶已經掌握了很多電腦故障排除的方法,那么在電腦開機后...

  • 筆記本雙顯卡切換,筆記本雙顯卡怎么設置

    筆記本雙顯卡切換,筆記本雙顯卡怎么設置 相關圖片筆記本雙顯卡怎么只用獨顯由于CPU集成顯卡的性能有限,無法與獨立顯卡相匹配。此外,當雙顯卡計算機運行某些游戲時,也可能由于兼容性而導致游戲無法安裝或閃回。所以使用筆記...

  • css浮動代碼,css清除浮動代碼

    css浮動代碼,css清除浮動代碼 相關圖片css 怎么向上浮動對于一個經常使用CSS設計頁面的前端設計師來說,清除浮動似乎是一項基本技能,但是清除浮動的方法和代碼有很多。今天,在許多大型項目上共享一個流行的和采用的...

  • 無線上網卡筆記本,筆記本無線上網卡怎么收費

    無線上網卡筆記本,筆記本無線上網卡怎么收費 相關圖片無線網卡筆記本現代社會已經滿足了人們的基本需求,隨之而來的是人們對質量的要求。無論是衣食住行,還是吃喝玩樂。人們逐漸放棄了衣食住行和上網的基本要求。一些用戶提出了...

  • 常見誤區,有哪些常見的誤區

    常見誤區,有哪些常見的誤區 相關圖片常見的飲食誤區目前,HTML5還處于初稿階段,一些新的標簽元素的解釋經常發生變化,甚至標簽的添加和刪除也很頻繁(比如hgroup)。同時,現有的大型門戶網站沒有很好的例子可以5大...

  • 電腦鍵盤打字錯亂,聯想電腦鍵盤打字錯亂

    電腦鍵盤打字錯亂,聯想電腦鍵盤打字錯亂 相關圖片電腦鍵盤輸入字母錯亂近日,有用戶發現筆記本電腦的鍵盤按鍵突然失靈。鍵盤上的數字和字母放錯地方了。U變成4,我變成5,O變成6,J變成1,K變成2,l變成3,m變成0。使用這些字母,...

  • 中國總設計師是誰,中國總設計師

    中國總設計師是誰,中國總設計師 相關圖片殲15總設計師在魅族論壇里有這樣一個身份證。他叫十一月雨。他的頭就像一張剪影照片11月雨曾在2009-2011年活躍在魅族論壇上。他負責魅族當時推出的第一款也是唯一一款智能手殲2o總...

  • 顯示器怎么校準顏色,顯示器顏色校準

    顯示器怎么校準顏色,顯示器顏色校準 相關圖片顯示器最佳顏色設置我相信很多用戶對顯示器的顏色非常敏感。如果有飛蛾,一定很不習慣使用。然后使用顯示器的顏色校正軟件。它可以幫助用戶通過軟件修改屏幕的顏色,而無需使...

關注微信

变脸官网查询