方法/步驟
專注于為中小企業(yè)提供網(wǎng)站設(shè)計、成都做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)和龍免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
許多主流的北京網(wǎng)站設(shè)計公司發(fā)現(xiàn)，很多的HTML5都不能夠真正的跨平臺，同時我們也會根據(jù)自身的經(jīng)驗和行業(yè)資深的技術(shù)分析出HTML5不能跨平臺的原因，因此我們在設(shè)計網(wǎng)站的時候應(yīng)該怎么解決H5在實際應(yīng)用中的兼容性問題呢？
從現(xiàn)行的行業(yè)技術(shù)來講，能夠真正實現(xiàn)H5跨平臺的公司鳳毛麟角，而且能夠?qū)崿F(xiàn)這樣的技術(shù)的途徑也只有兩個：
1.可以通過個人pc固定的瀏覽器，這些瀏覽器都有自身的內(nèi)核，可以強制性的使用。就不存在兼容性問題。這種辦法一般可以用在辦公室的場景。但是在巨大的瀏覽器市場里面，想要約束或者強制網(wǎng)民使用某一款瀏覽器是做不到的，這樣子指揮帶給客戶非常不好的印象和丟失一大批的客戶。
對于辦公場景，現(xiàn)在員工使用的網(wǎng)絡(luò)人數(shù)有限，不像普通市民擁有好記憶的網(wǎng)民。因此我們必須花費時間去測試建通和修復(fù)這樣的難題。我們應(yīng)該可以針對于網(wǎng)名做相應(yīng)的優(yōu)化。但是在公司辦公的時候，我們應(yīng)該強制使用具有安全認(rèn)證的固定瀏覽器，可以減少開發(fā)的工作量，還可以防止數(shù)據(jù)泄露和木馬入侵。達到保障企業(yè)數(shù)據(jù)安全，事半功倍的效果。
3
2.面對不同瀏覽器的兼容問題，所有的H5都是基于框架來開發(fā)的?，F(xiàn)在行業(yè)中主流的UI框架有很多，比如國內(nèi)的Amaze。基于這些框架來設(shè)計網(wǎng)站可以減少大量的兼容瀏覽器的調(diào)試工作。很多的UI框架都是具有十分優(yōu)美的審美觀，還能夠通過網(wǎng)民的習(xí)慣和喜好和相應(yīng)主流的瀏覽器做大量的優(yōu)化調(diào)整。
html5兼容以前html4下的瀏覽器。html5具有兼容性和實用性的特點，在老版本的瀏覽器可以正常運行，同時支持html5的新瀏覽器也能正常運行html4，用html4創(chuàng)建出來的網(wǎng)站不是必須全部重建的。html5能夠解決實際問題，內(nèi)部只封裝了切實有用的功能，不封裝復(fù)雜而沒有實際意義的功能。
目前HTML5已向開發(fā)人員提供了很多新的標(biāo)簽，如section，nav，article，header和footer等。這些標(biāo)簽語義化程度高，會被經(jīng)常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識別和正常使用。
一、HTML5標(biāo)簽在瀏覽器展示存在的問題
對于現(xiàn)階段來說，使用HTML5標(biāo)簽可能遇到的最大問題就是如何在不支持新標(biāo)簽的瀏覽器中做恰當(dāng)?shù)奶幚?。?dāng)我們在頁面中使用HTML5元素時，可能會得到三種不同的結(jié)果。
結(jié)果1：標(biāo)簽被當(dāng)作錯誤處理并被忽略。那么DOM構(gòu)建的時候，就會當(dāng)作這個標(biāo)簽不存在。
結(jié)果2：標(biāo)簽會被當(dāng)作錯誤處理，并在DOM構(gòu)建的時候依然會按照預(yù)期的代碼進行創(chuàng)建，并且HTML標(biāo)簽會被構(gòu)造成行內(nèi)元素（也就是說雖然不能識別，但是代碼里section標(biāo)簽依然會在dom中創(chuàng)建一個對應(yīng)section節(jié)點，但是屬于行內(nèi)元素）。
結(jié)果3：標(biāo)簽被識別為HTML5標(biāo)簽，然后用DOM節(jié)點對其進行替換。DOM在構(gòu)建的時候和預(yù)想的一致，并且合適的樣式會應(yīng)用到標(biāo)簽上（大部分情況下是塊級元素）。
有一個具體的例子，大家思考一下下面的代碼：
div class="outer"
section
h1title/h1
ptext/p
/section
/div
很多瀏覽器（比如Firefox
3.6和Safari4）解析的時候都會將div作為最外層的元素，然后div里面是一個識別不了的元素（section），它會在DOM中創(chuàng)建，并被作為一個行內(nèi)元素存在。h1和p元素都是作為section元素的子節(jié)點。因為section在DOM中真實存在，所以也可以修改其樣式。這種情況對應(yīng)結(jié)果2。
IE9之前的版本會認(rèn)為section標(biāo)簽是一個錯誤，并直接將其忽略，那么h1和p標(biāo)簽會被解析，然后成為div標(biāo)簽的子節(jié)點。/section也會被認(rèn)為是一個錯誤并直接跳過。在這些瀏覽器中實際有效的代碼是這樣的：
div class="outer"
h1title/h1
ptext/p
/div
那么，舊版本的IE瀏覽器除了生成的DOM結(jié)構(gòu)和其他瀏覽器不一樣，其對不可識別標(biāo)簽的容錯能力還是很棒的。因為section節(jié)點沒有在DOM樹中構(gòu)建，所以也就不能給其增加樣式。這種情況對應(yīng)結(jié)果1。
當(dāng)然，支持HTML5的瀏覽器比如IE9，F(xiàn)irefox4+，Safari5+會創(chuàng)建正確的DOM結(jié)構(gòu)，然后這些標(biāo)簽會默認(rèn)附帶HTML5規(guī)范中定義的默認(rèn)樣式。
那么，我們所面臨的最大問題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結(jié)構(gòu)，并且含有不同的樣式。
二、如何解決HTML5標(biāo)簽不兼容
或許會有很多人在質(zhì)疑：為什么老式的瀏覽器不能識別這些標(biāo)簽？其實錯不在瀏覽器，因為在那個時代根本不存在這種標(biāo)簽，所以不能正確識別出來，而這種不尋常的標(biāo)簽識別令DOM結(jié)構(gòu)變得異常。對此，人們想出了很多在現(xiàn)階段頁面中使用HTML5元素的解決方案。每一個解決方案為了做到兼容都會遇到一些特定的問題。在此也在馬海祥博客上跟大家分享一下：
1、實現(xiàn)標(biāo)簽被識別
馬海祥曾做個一個測試（以IE8為例），是一個文章標(biāo)題和藍色字的文章內(nèi)容，其中文章內(nèi)容用了article標(biāo)簽。代碼如下：
!DOCTYPE html
html xmlns="" lang="zh-CN"
head
meta charset="UTF-8" /
title測試/title
style
article{color:#06F;}
/style
/head
body
h1文章標(biāo)題/h1
article
這是文章內(nèi)容，應(yīng)該是一段藍色的文字。在老式瀏覽器中，如果不做hack將顯示異常。
/article
/body
/html
在IE8瀏覽器中，顯示如下：
IE8不能識別article標(biāo)簽， 定義在標(biāo)簽上的CSS樣式?jīng)]有起作用。
在IE8中，article被解釋成命名為article /和/article
/兩個空的標(biāo)簽元素，與文章內(nèi)容并列為兄弟節(jié)點，如下圖所示：
既然因為不能識別標(biāo)簽而不能使用，那我們的解決辦法就是讓標(biāo)簽被識別出來。所幸，簡單地通過document.createElement（tagName）即可以讓瀏覽器識別標(biāo)簽和CSS引擎知道該標(biāo)簽的存在。假設(shè)我們上面的例子的head區(qū)域加上如下代碼。
script
document.createElement('article');
/script
IE8瀏覽器中的DOM解釋就會變成下圖所示：
自然，文字也顯示成正常的藍色。如下圖所示：
2、JavaScript解決方案
JavaScript解決方案目的是解決在舊版本的IE中樣式應(yīng)用的問題。老版本的IE不會識別不明元素已經(jīng)是一個耳熟能詳?shù)奶匦裕绻@些元素已經(jīng)通過document.createElement()創(chuàng)建，那么瀏覽器就可以識別這些標(biāo)簽，并可以將其在DOM樹中構(gòu)建，然后允許開發(fā)者對其應(yīng)用樣式。
這個方法可以確保HTML5標(biāo)簽?zāi)茉谂f版本IE中對應(yīng)創(chuàng)建DOM節(jié)點，然后可以對其應(yīng)用樣式。這個方法將HTML5塊級元素設(shè)置成display:block，從而可以在各個瀏覽器中做到兼容。
今天測試以下把馬海祥博客的網(wǎng)頁改成了HTML5的，調(diào)試了一下，在FF和Opera中都顯示正常了，到了IE6上卻變得面目全非了。對此我還特意去找了一些使用JS代碼支持HTML5標(biāo)簽元素的方法，在此也跟大家分享一下：
（1）、使用html5shiv
查看了一下，發(fā)現(xiàn)了html5shiv能解決這個問題，可以把HTML5的新元素轉(zhuǎn)換成IE6認(rèn)識的內(nèi)容。只需要在你的head中調(diào)用這段代碼就行：
!--if lt IE 9]
script src=""/script
![endif]--
當(dāng)然你也可以直接把這個文件下載到自己的網(wǎng)站上。但這個文件必須在head標(biāo)簽中調(diào)用，因為IE必須在元素解析這前知道這些元素，才能啟作用！但馬海祥還要提醒你一下：還要在你的CSS文件中加上以下代碼，不然有可能會出現(xiàn)些莫名其妙的問題。
header,nav,article,section,aside,footer{display:block;}
另外excanvas.js是Google為IE6支持canvas元素寫的腳本，以后馬海祥會跟大家再細說這樣的例子，感興趣的朋友可以去試試。
（2）、使用Kill IE6
除此之外你還可以使用KILL IE6一族，前提是你的瀏覽器允許執(zhí)行JS文件。方法很簡單，在你的網(wǎng)站的/body之前加上以下代碼就可以了：
!--if lte IE 6]
script src=""/script
![endif]--
上面寫的!--if lte IE 6]在正常的HTML中屬于注釋，不會被執(zhí)行，但在IE中是一個判斷語句，所以這些代碼只有在IE中才會被識別并加載。
lte：就是Less than or equal to的簡寫，也就是小于或等于的意思。
lt ：就是Less than的簡寫，也就是小于的意思。
gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。
gt ：就是Greater than的簡寫，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判斷符相同
說實話，馬海祥不喜歡這個利用JavaScript解決的方案，因為它破壞了我最主要的web應(yīng)用開發(fā)原則：我們不應(yīng)該使用JavaScript來控制布局。不僅僅是因為這個做法給那些禁用腳本的用戶帶來了糟糕的用戶體驗，更重要的是，如果我們希望我們的web應(yīng)用代碼是面向未來，并且維護性高的，那么必須將視圖相關(guān)部分分離出來。這個方案對在跨瀏覽器中構(gòu)建相同的DOM結(jié)構(gòu)很有幫助，也可以確保你的JavaScript和CSS在各個地方運行結(jié)果相同，但是這個優(yōu)勢并不能改變我對這個方法的不認(rèn)同。
3、Namespace hack
永遠不要缺乏使用hack解決問題的能力，在IE中還有其他技術(shù)來讓瀏覽器識別不明的標(biāo)簽。這個來自Elco Klingen日志的方法一開始引起了廣泛的關(guān)注。該技術(shù)包含了一個XML形式的命名空間，并使用了含有namespace前綴的元素。例如：
html xmlns="" xmlns:html5=""
body
html5:section
!-- content --
/html5:section
/body
/html
前綴html5是純粹是用于這個例子而且也不是官方支持的，你甚至可以用"foo"作為前綴，結(jié)果還是一樣。有了前綴之后，IE會識別新的元素，從而可以應(yīng)用樣式。在其他瀏覽器中一樣有效，那么最后，你就成功地在各個瀏覽器中構(gòu)建了一樣的元素和一樣的樣式。
這個方法的缺陷很明顯：你必須在HTML文檔中使用XML格式的命名空間，同樣，你也需要在css中這么做:
html5\:section {
display: block;
}
馬海祥點評：這并不是我期望Web開發(fā)者編寫代碼的方式。雖然這是一個非常杰出的解決方案，但是這讓應(yīng)用變得不自然。我不希望看到文件中充滿了帶命名空間的元素。
4、Bulletproof技術(shù)（防彈衣技術(shù)）
說實話，我是第一次接觸到這個技術(shù)，建議在所有新的HTML5塊級元素中增加一個內(nèi)部的div元素，然后包含一個CSS class，用這個元素來替代HTML元素（類似在里面穿了一件防彈衣），例如：
section
div class="section"
!-- content --
/div
/section
在應(yīng)用樣式的時候，Tantek推薦直接給div增加樣式，而不是給新元素增加樣式
推薦使用：
.section {
color: blue;
}
而不是：
section {
color: blue;
}
這個方案的原理是用簡單的方式將原來的樣式應(yīng)用方式轉(zhuǎn)移到一個代表了HTML5標(biāo)簽的元素上。由于我一般情況下不會將樣式通過標(biāo)簽名的方式應(yīng)用到元素上，所以馬海祥也并完全支持這個建議。
馬海祥覺得這個方案的缺陷是不同的瀏覽器構(gòu)建了不同的DOM結(jié)構(gòu)，那么你必須在編寫JavaScript和CSS的時候格外小心。獲取子節(jié)點或者父節(jié)點的時候，不同的瀏覽器返回的結(jié)果可能會不一樣。特別是在下面的代碼中：
div class="outer"
section
div class="section main"
!-- content --
/div/section
/div
5、反向的bulletproof技術(shù)
還有一些方法，比如嘗試使用和Tanteck方案相反的技術(shù)，也就是把HTML5元素放在div元素內(nèi)部，例如：
div class="section"
section
!-- content --
/section
div
這個方案唯一的不同是HTML5元素的位置，其他都一樣。喜歡這個技術(shù)的支持者認(rèn)為他的一致性很好（適用于所有的元素，包括hgroup）。但是DOM結(jié)構(gòu)的不同讓這個方案意義變得不大。他的主要優(yōu)勢是技術(shù)上的一致性。
6、關(guān)于X-UA-Compatible的使用
目前絕大多數(shù)網(wǎng)站都用以下代碼來作為IE8的兼容方法。
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
雖然微軟將IE向標(biāo)準(zhǔn)邁進了一大步，而事實上IE8還存在一系列渲染的奇怪現(xiàn)象是不爭的事實。
在X-UA-Compatible中可用的方法有：
meta http-equiv="X-UA-Compatible" content="IE=6"
meta http-equiv="X-UA-Compatible" content="IE=7"
meta http-equiv="X-UA-Compatible" content="IE=8"
meta http-equiv="X-UA-Compatible" content="IE=edge"
其中最后一行是永遠以最新的IE版本模式來顯示網(wǎng)頁的。
另外加上
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"
而使用，Emulate模式后則更重視。
所以目前來說還是以使用
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
為首選。
7、通過修改HTML部分來實現(xiàn)
我的主要目標(biāo)是確保我只需要修改HTML部分。這就意味著不需要修改CSS和JavaScript。為什么會有這樣的需求？需要修改的Web應(yīng)用視圖越多，你越有可能制造bug。將改變限制到一個視圖也就限制了bug的出現(xiàn)，即使出現(xiàn)了bug，也可以減少你查找錯誤的范圍。如果一個視圖破相了，我可以知道這是因為我增加了一個section元素，而不是考慮是不是CSS文件修改來帶的影響。
在研究了所有這些解決方案，并進行一些嘗試和設(shè)計之后，我回到了Tantek的方案。這是唯一一個只需要修改HTML而不用動CSS和HTML的方案?，F(xiàn)在，我在他的方案基礎(chǔ)上做了一些改進，來達到我想要的結(jié)果。
首先，我不會給那些代表HTML5元素的class增加樣式（所以我不會使用.section這樣的選擇器）。我保留了div元素，然后再增加一個帶語義的class來應(yīng)用樣式，并作為進行JavaScript操作的鉤子。例如，這樣的代碼：
div class="content"
!-- content --
/div
經(jīng)過改進后：
section
div class="section content"
!-- content --
/div
/section
這樣的修改完成后，我依然使用.content作為樣式和腳本的入口。這也意味著我不需要修改CSS和JavaScript。
然后，為了避免hgroup標(biāo)簽這樣的情況，我選擇不使用這個標(biāo)簽。我在我已有的所有頁面中沒有找到任何一個使用了這個標(biāo)簽的。由于hgroup標(biāo)簽只能包含標(biāo)題元素，如果你確實想要使用這個標(biāo)簽，那么使用hrgoup來包含本身是非常安全的（假設(shè)它沒有包含其他的塊級元素）。
我在馬海祥博客上花了很多時間來測試比較bulletproof和反向的bulletproof哪個更好一些。我做選擇時最主要的決定因素就是反向的bulletproof需要我去增加CSS代碼。在那些為HTML5標(biāo)簽創(chuàng)建了DOM節(jié)點但是沒有應(yīng)用默認(rèn)樣式的元素來說，div元素里包含了一個HTML5塊級元素在很多情況下都會攪亂我的布局，因為創(chuàng)建的DOM節(jié)點是行內(nèi)元素。我不得不明確增加CSS規(guī)則來讓這個節(jié)點變成塊級元素從而可以正常布局，這也就違反了我不修改CSS文件的初衷。
馬海祥博客點評：
在我的研究中，我使用了多個頁面，然后在這些頁面上使用修改過后的bulletproof技術(shù)。我分別在簡單和復(fù)雜的布局中，含有和不含有JavaScript交互進行測試。在每一個例子中，我只需要修改HTML就可以讓頁面表現(xiàn)正確（不修改JavaScript和CSS）。那么，子節(jié)點和父節(jié)點的問題怎么辦？有趣的事情是我在測試中并沒有遇到這樣的問題。
理由很簡單，因為我對代碼苛刻的態(tài)度。我認(rèn)真地做了第二遍檢查：
（1）、標(biāo)簽名和ID不會用于應(yīng)用樣式（只是用class）。
（2）、盡量選擇常用的CSS選擇器并且盡量減少選擇器的使用。
（3）、JavaScript代碼不依賴于特定的DOM結(jié)構(gòu)。
（4）、標(biāo)簽名不用于操作DOM。
我注意到另一個有趣的事情是我使用了HTML5元素作為容器。而這些新的元素僅僅是作為功能性模塊的邊界。你應(yīng)該花費你的大部分時間為內(nèi)部的元素編寫樣式和腳本而不是處理各個模塊間的樣式和腳本。由于馬海祥博客的JavaScript和CSS標(biāo)簽都應(yīng)用在容器的內(nèi)部，所以一切都顯得很順利。我想這才是一個真正的代碼質(zhì)量高的網(wǎng)站。
讓HTML5
兼容所有瀏覽器的
方法.如今HTML5愈來愈引發(fā)大家的關(guān)注了，但目前支持HTML5的瀏覽器還不是主流，特別是國內(nèi)用戶近50%以上仍舊使用IE6，由于支持HTML5
的IE9不支持Xp系統(tǒng)安裝，這樣未來很長一段時間，HTML5的開發(fā)者將必須考慮向下兼容的問題。HTML5的標(biāo)簽或CSS選擇器兼容性的做法有很多，
其中自己生成標(biāo)簽元素就是一種。
基本原理參見如下代碼在IE8中效果，樣式根本沒有起作用。
Markup
html
head
style
mxria{
color:
red;
}/style
scriptdocument.createElement("mxria")/script
/head
body
mxriaHello!mxria.com/mxria
/body
/html
為了是瀏覽器識別標(biāo)簽并顯示對應(yīng)樣式的效果，我們可以如下增加一段js，看到效果就不同了
Markup
html
head
style
mxria{
color:
red;
}/style
scriptdocument.createElement("mxria")/script
/head
body
mxriaHello!mxria.com/mxria
/body
/html
現(xiàn)在可以看出來了吧，對，就是document.createElement
，HTML5
shiv
是一個js插件，將所有HTML5的標(biāo)簽進行了重新生成，你需要加載該插件，那么HTML5程序就能被所有瀏覽器識別了。
首先考慮 單獨內(nèi)核的瀏覽器
包括：
IE
Firefox
Chrome
Opera
其中 國內(nèi) 多數(shù)瀏覽器都是基于IE開發(fā)的
html5本身對移動端的兼容性非常友好，但pc端的兼容性略差，所謂兼容性就是當(dāng)開發(fā)web網(wǎng)站時，在瀏覽器運行的時候，不同的瀏覽器可能會出現(xiàn)不同的問題，此時就要一一解決不同的瀏覽器出現(xiàn)的問題，而保證上線時用戶看到的頁面不是問題頁面。
重慶分公司
重慶分公司
