如何處理html5新標(biāo)簽的瀏覽器兼容問(wèn)題

目前HTML5已向開發(fā)人員提供了很多新的標(biāo)簽，如section，nav，article，header和footer等。這些標(biāo)簽語(yǔ)義化程度高，會(huì)被經(jīng)常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識(shí)別和正常使用。

巴馬網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

一、HTML5標(biāo)簽在瀏覽器展示存在的問(wèn)題

對(duì)于現(xiàn)階段來(lái)說(shuō)，使用HTML5標(biāo)簽可能遇到的最大問(wèn)題就是如何在不支持新標(biāo)簽的瀏覽器中做恰當(dāng)?shù)奶幚怼．?dāng)我們?cè)陧?yè)面中使用HTML5元素時(shí)，可能會(huì)得到三種不同的結(jié)果。

結(jié)果1：標(biāo)簽被當(dāng)作錯(cuò)誤處理并被忽略。那么DOM構(gòu)建的時(shí)候，就會(huì)當(dāng)作這個(gè)標(biāo)簽不存在。

結(jié)果2：標(biāo)簽會(huì)被當(dāng)作錯(cuò)誤處理，并在DOM構(gòu)建的時(shí)候依然會(huì)按照預(yù)期的代碼進(jìn)行創(chuàng)建，并且HTML標(biāo)簽會(huì)被構(gòu)造成行內(nèi)元素（也就是說(shuō)雖然不能識(shí)別，但是代碼里section標(biāo)簽依然會(huì)在dom中創(chuàng)建一個(gè)對(duì)應(yīng)section節(jié)點(diǎn)，但是屬于行內(nèi)元素）。

結(jié)果3：標(biāo)簽被識(shí)別為HTML5標(biāo)簽，然后用DOM節(jié)點(diǎn)對(duì)其進(jìn)行替換。DOM在構(gòu)建的時(shí)候和預(yù)想的一致，并且合適的樣式會(huì)應(yīng)用到標(biāo)簽上（大部分情況下是塊級(jí)元素）。

有一個(gè)具體的例子，大家思考一下下面的代碼：

div class="outer"

section

h1title/h1

ptext/p

/section

/div

很多瀏覽器（比如Firefox

3.6和Safari4）解析的時(shí)候都會(huì)將div作為最外層的元素，然后div里面是一個(gè)識(shí)別不了的元素（section），它會(huì)在DOM中創(chuàng)建，并被作為一個(gè)行內(nèi)元素存在。h1和p元素都是作為section元素的子節(jié)點(diǎn)。因?yàn)閟ection在DOM中真實(shí)存在，所以也可以修改其樣式。這種情況對(duì)應(yīng)結(jié)果2。

IE9之前的版本會(huì)認(rèn)為section標(biāo)簽是一個(gè)錯(cuò)誤，并直接將其忽略，那么h1和p標(biāo)簽會(huì)被解析，然后成為div標(biāo)簽的子節(jié)點(diǎn)。/section也會(huì)被認(rèn)為是一個(gè)錯(cuò)誤并直接跳過(guò)。在這些瀏覽器中實(shí)際有效的代碼是這樣的：

div class="outer"

h1title/h1

ptext/p

/div

那么，舊版本的IE瀏覽器除了生成的DOM結(jié)構(gòu)和其他瀏覽器不一樣，其對(duì)不可識(shí)別標(biāo)簽的容錯(cuò)能力還是很棒的。因?yàn)閟ection節(jié)點(diǎn)沒(méi)有在DOM樹中構(gòu)建，所以也就不能給其增加樣式。這種情況對(duì)應(yīng)結(jié)果1。

當(dāng)然，支持HTML5的瀏覽器比如IE9，F(xiàn)irefox4+，Safari5+會(huì)創(chuàng)建正確的DOM結(jié)構(gòu)，然后這些標(biāo)簽會(huì)默認(rèn)附帶HTML5規(guī)范中定義的默認(rèn)樣式。

那么，我們所面臨的最大問(wèn)題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結(jié)構(gòu)，并且含有不同的樣式。

二、如何解決HTML5標(biāo)簽不兼容

或許會(huì)有很多人在質(zhì)疑：為什么老式的瀏覽器不能識(shí)別這些標(biāo)簽？其實(shí)錯(cuò)不在瀏覽器，因?yàn)樵谀莻€(gè)時(shí)代根本不存在這種標(biāo)簽，所以不能正確識(shí)別出來(lái)，而這種不尋常的標(biāo)簽識(shí)別令DOM結(jié)構(gòu)變得異常。對(duì)此，人們想出了很多在現(xiàn)階段頁(yè)面中使用HTML5元素的解決方案。每一個(gè)解決方案為了做到兼容都會(huì)遇到一些特定的問(wèn)題。在此也在馬海祥博客上跟大家分享一下：

1、實(shí)現(xiàn)標(biāo)簽被識(shí)別

馬海祥曾做個(gè)一個(gè)測(cè)試（以IE8為例），是一個(gè)文章標(biāo)題和藍(lán)色字的文章內(nèi)容，其中文章內(nèi)容用了article標(biāo)簽。代碼如下：

!DOCTYPE html

html xmlns="" lang="zh-CN"

head

meta charset="UTF-8" /

title測(cè)試/title

style

article{color:#06F;}

/style

/head

body

h1文章標(biāo)題/h1

article

這是文章內(nèi)容，應(yīng)該是一段藍(lán)色的文字。在老式瀏覽器中，如果不做hack將顯示異常。

/article

/body

/html

在IE8瀏覽器中，顯示如下：

IE8不能識(shí)別article標(biāo)簽， 定義在標(biāo)簽上的CSS樣式?jīng)]有起作用。

在IE8中，article被解釋成命名為article /和/article

/兩個(gè)空的標(biāo)簽元素，與文章內(nèi)容并列為兄弟節(jié)點(diǎn)，如下圖所示：

既然因?yàn)椴荒茏R(shí)別標(biāo)簽而不能使用，那我們的解決辦法就是讓標(biāo)簽被識(shí)別出來(lái)。所幸，簡(jiǎn)單地通過(guò)document.createElement（tagName）即可以讓瀏覽器識(shí)別標(biāo)簽和CSS引擎知道該標(biāo)簽的存在。假設(shè)我們上面的例子的head區(qū)域加上如下代碼。

script

document.createElement('article');

/script

IE8瀏覽器中的DOM解釋就會(huì)變成下圖所示：

自然，文字也顯示成正常的藍(lán)色。如下圖所示：

2、JavaScript解決方案

JavaScript解決方案目的是解決在舊版本的IE中樣式應(yīng)用的問(wèn)題。老版本的IE不會(huì)識(shí)別不明元素已經(jīng)是一個(gè)耳熟能詳?shù)奶匦裕绻@些元素已經(jīng)通過(guò)document.createElement()創(chuàng)建，那么瀏覽器就可以識(shí)別這些標(biāo)簽，并可以將其在DOM樹中構(gòu)建，然后允許開發(fā)者對(duì)其應(yīng)用樣式。

這個(gè)方法可以確保HTML5標(biāo)簽?zāi)茉谂f版本IE中對(duì)應(yīng)創(chuàng)建DOM節(jié)點(diǎn)，然后可以對(duì)其應(yīng)用樣式。這個(gè)方法將HTML5塊級(jí)元素設(shè)置成display:block，從而可以在各個(gè)瀏覽器中做到兼容。

今天測(cè)試以下把馬海祥博客的網(wǎng)頁(yè)改成了HTML5的，調(diào)試了一下，在FF和Opera中都顯示正常了，到了IE6上卻變得面目全非了。對(duì)此我還特意去找了一些使用JS代碼支持HTML5標(biāo)簽元素的方法，在此也跟大家分享一下：

（1）、使用html5shiv

查看了一下，發(fā)現(xiàn)了html5shiv能解決這個(gè)問(wèn)題，可以把HTML5的新元素轉(zhuǎn)換成IE6認(rèn)識(shí)的內(nèi)容。只需要在你的head中調(diào)用這段代碼就行：

!--if lt IE 9]

script src=""/script

![endif]--

當(dāng)然你也可以直接把這個(gè)文件下載到自己的網(wǎng)站上。但這個(gè)文件必須在head標(biāo)簽中調(diào)用，因?yàn)镮E必須在元素解析這前知道這些元素，才能啟作用！但馬海祥還要提醒你一下：還要在你的CSS文件中加上以下代碼，不然有可能會(huì)出現(xiàn)些莫名其妙的問(wèn)題。

header,nav,article,section,aside,footer{display:block;}

另外excanvas.js是Google為IE6支持canvas元素寫的腳本，以后馬海祥會(huì)跟大家再細(xì)說(shuō)這樣的例子，感興趣的朋友可以去試試。

（2）、使用Kill IE6

除此之外你還可以使用KILL IE6一族，前提是你的瀏覽器允許執(zhí)行JS文件。方法很簡(jiǎn)單，在你的網(wǎng)站的/body之前加上以下代碼就可以了：

!--if lte IE 6]

script src=""/script

![endif]--

上面寫的!--if lte IE 6]在正常的HTML中屬于注釋，不會(huì)被執(zhí)行，但在IE中是一個(gè)判斷語(yǔ)句，所以這些代碼只有在IE中才會(huì)被識(shí)別并加載。

lte：就是Less than or equal to的簡(jiǎn)寫，也就是小于或等于的意思。

lt ：就是Less than的簡(jiǎn)寫，也就是小于的意思。

gte：就是Greater than or equal to的簡(jiǎn)寫，也就是大于或等于的意思。

gt ：就是Greater than的簡(jiǎn)寫，也就是大于的意思。

! ： 就是不等于的意思，跟javascript里的不等于判斷符相同

說(shuō)實(shí)話，馬海祥不喜歡這個(gè)利用JavaScript解決的方案，因?yàn)樗茐牧宋易钪饕膚eb應(yīng)用開發(fā)原則：我們不應(yīng)該使用JavaScript來(lái)控制布局。不僅僅是因?yàn)檫@個(gè)做法給那些禁用腳本的用戶帶來(lái)了糟糕的用戶體驗(yàn)，更重要的是，如果我們希望我們的web應(yīng)用代碼是面向未來(lái)，并且維護(hù)性高的，那么必須將視圖相關(guān)部分分離出來(lái)。這個(gè)方案對(duì)在跨瀏覽器中構(gòu)建相同的DOM結(jié)構(gòu)很有幫助，也可以確保你的JavaScript和CSS在各個(gè)地方運(yùn)行結(jié)果相同，但是這個(gè)優(yōu)勢(shì)并不能改變我對(duì)這個(gè)方法的不認(rèn)同。

3、Namespace hack

永遠(yuǎn)不要缺乏使用hack解決問(wèn)題的能力，在IE中還有其他技術(shù)來(lái)讓瀏覽器識(shí)別不明的標(biāo)簽。這個(gè)來(lái)自Elco Klingen日志的方法一開始引起了廣泛的關(guān)注。該技術(shù)包含了一個(gè)XML形式的命名空間，并使用了含有namespace前綴的元素。例如：

html xmlns="" xmlns:html5=""

body

html5:section

!-- content --

/html5:section

/body

/html

前綴html5是純粹是用于這個(gè)例子而且也不是官方支持的，你甚至可以用"foo"作為前綴，結(jié)果還是一樣。有了前綴之后，IE會(huì)識(shí)別新的元素，從而可以應(yīng)用樣式。在其他瀏覽器中一樣有效，那么最后，你就成功地在各個(gè)瀏覽器中構(gòu)建了一樣的元素和一樣的樣式。

這個(gè)方法的缺陷很明顯：你必須在HTML文檔中使用XML格式的命名空間，同樣，你也需要在css中這么做:

html5\:section {

display: block;

}

馬海祥點(diǎn)評(píng)：這并不是我期望Web開發(fā)者編寫代碼的方式。雖然這是一個(gè)非常杰出的解決方案，但是這讓應(yīng)用變得不自然。我不希望看到文件中充滿了帶命名空間的元素。

4、Bulletproof技術(shù)（防彈衣技術(shù)）

說(shuō)實(shí)話，我是第一次接觸到這個(gè)技術(shù)，建議在所有新的HTML5塊級(jí)元素中增加一個(gè)內(nèi)部的div元素，然后包含一個(gè)CSS class，用這個(gè)元素來(lái)替代HTML元素（類似在里面穿了一件防彈衣），例如：

section

div class="section"

!-- content --

/div

/section

在應(yīng)用樣式的時(shí)候，Tantek推薦直接給div增加樣式，而不是給新元素增加樣式

推薦使用：

.section {

color: blue;

}

而不是：

section {

color: blue;

}

這個(gè)方案的原理是用簡(jiǎn)單的方式將原來(lái)的樣式應(yīng)用方式轉(zhuǎn)移到一個(gè)代表了HTML5標(biāo)簽的元素上。由于我一般情況下不會(huì)將樣式通過(guò)標(biāo)簽名的方式應(yīng)用到元素上，所以馬海祥也并完全支持這個(gè)建議。

馬海祥覺(jué)得這個(gè)方案的缺陷是不同的瀏覽器構(gòu)建了不同的DOM結(jié)構(gòu)，那么你必須在編寫JavaScript和CSS的時(shí)候格外小心。獲取子節(jié)點(diǎn)或者父節(jié)點(diǎn)的時(shí)候，不同的瀏覽器返回的結(jié)果可能會(huì)不一樣。特別是在下面的代碼中：

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

這個(gè)方案唯一的不同是HTML5元素的位置，其他都一樣。喜歡這個(gè)技術(shù)的支持者認(rèn)為他的一致性很好（適用于所有的元素，包括hgroup）。但是DOM結(jié)構(gòu)的不同讓這個(gè)方案意義變得不大。他的主要優(yōu)勢(shì)是技術(shù)上的一致性。

6、關(guān)于X-UA-Compatible的使用

目前絕大多數(shù)網(wǎng)站都用以下代碼來(lái)作為IE8的兼容方法。

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

雖然微軟將IE向標(biāo)準(zhǔn)邁進(jìn)了一大步，而事實(shí)上IE8還存在一系列渲染的奇怪現(xiàn)象是不爭(zhēng)的事實(shí)。

在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"

其中最后一行是永遠(yuǎn)以最新的IE版本模式來(lái)顯示網(wǎng)頁(yè)的。

另外加上

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"

而使用，Emulate模式后則更重視。

所以目前來(lái)說(shuō)還是以使用

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

為首選。

7、通過(guò)修改HTML部分來(lái)實(shí)現(xiàn)

我的主要目標(biāo)是確保我只需要修改HTML部分。這就意味著不需要修改CSS和JavaScript。為什么會(huì)有這樣的需求？需要修改的Web應(yīng)用視圖越多，你越有可能制造bug。將改變限制到一個(gè)視圖也就限制了bug的出現(xiàn)，即使出現(xiàn)了bug，也可以減少你查找錯(cuò)誤的范圍。如果一個(gè)視圖破相了，我可以知道這是因?yàn)槲以黾恿艘粋€(gè)section元素，而不是考慮是不是CSS文件修改來(lái)帶的影響。

在研究了所有這些解決方案，并進(jìn)行一些嘗試和設(shè)計(jì)之后，我回到了Tantek的方案。這是唯一一個(gè)只需要修改HTML而不用動(dòng)CSS和HTML的方案。現(xiàn)在，我在他的方案基礎(chǔ)上做了一些改進(jìn)，來(lái)達(dá)到我想要的結(jié)果。

首先，我不會(huì)給那些代表HTML5元素的class增加樣式（所以我不會(huì)使用.section這樣的選擇器）。我保留了div元素，然后再增加一個(gè)帶語(yǔ)義的class來(lái)應(yīng)用樣式，并作為進(jìn)行JavaScript操作的鉤子。例如，這樣的代碼：

div class="content"

!-- content --

/div

經(jīng)過(guò)改進(jìn)后：

section

div class="section content"

!-- content --

/div

/section

這樣的修改完成后，我依然使用.content作為樣式和腳本的入口。這也意味著我不需要修改CSS和JavaScript。

然后，為了避免hgroup標(biāo)簽這樣的情況，我選擇不使用這個(gè)標(biāo)簽。我在我已有的所有頁(yè)面中沒(méi)有找到任何一個(gè)使用了這個(gè)標(biāo)簽的。由于hgroup標(biāo)簽只能包含標(biāo)題元素，如果你確實(shí)想要使用這個(gè)標(biāo)簽，那么使用hrgoup來(lái)包含本身是非常安全的（假設(shè)它沒(méi)有包含其他的塊級(jí)元素）。

我在馬海祥博客上花了很多時(shí)間來(lái)測(cè)試比較bulletproof和反向的bulletproof哪個(gè)更好一些。我做選擇時(shí)最主要的決定因素就是反向的bulletproof需要我去增加CSS代碼。在那些為HTML5標(biāo)簽創(chuàng)建了DOM節(jié)點(diǎn)但是沒(méi)有應(yīng)用默認(rèn)樣式的元素來(lái)說(shuō)，div元素里包含了一個(gè)HTML5塊級(jí)元素在很多情況下都會(huì)攪亂我的布局，因?yàn)閯?chuàng)建的DOM節(jié)點(diǎn)是行內(nèi)元素。我不得不明確增加CSS規(guī)則來(lái)讓這個(gè)節(jié)點(diǎn)變成塊級(jí)元素從而可以正常布局，這也就違反了我不修改CSS文件的初衷。

馬海祥博客點(diǎn)評(píng)：

在我的研究中，我使用了多個(gè)頁(yè)面，然后在這些頁(yè)面上使用修改過(guò)后的bulletproof技術(shù)。我分別在簡(jiǎn)單和復(fù)雜的布局中，含有和不含有JavaScript交互進(jìn)行測(cè)試。在每一個(gè)例子中，我只需要修改HTML就可以讓頁(yè)面表現(xiàn)正確（不修改JavaScript和CSS）。那么，子節(jié)點(diǎn)和父節(jié)點(diǎn)的問(wèn)題怎么辦？有趣的事情是我在測(cè)試中并沒(méi)有遇到這樣的問(wèn)題。

理由很簡(jiǎn)單，因?yàn)槲覍?duì)代碼苛刻的態(tài)度。我認(rèn)真地做了第二遍檢查：

（1）、標(biāo)簽名和ID不會(huì)用于應(yīng)用樣式（只是用class）。

（2）、盡量選擇常用的CSS選擇器并且盡量減少選擇器的使用。

（3）、JavaScript代碼不依賴于特定的DOM結(jié)構(gòu)。

（4）、標(biāo)簽名不用于操作DOM。

我注意到另一個(gè)有趣的事情是我使用了HTML5元素作為容器。而這些新的元素僅僅是作為功能性模塊的邊界。你應(yīng)該花費(fèi)你的大部分時(shí)間為內(nèi)部的元素編寫樣式和腳本而不是處理各個(gè)模塊間的樣式和腳本。由于馬海祥博客的JavaScript和CSS標(biāo)簽都應(yīng)用在容器的內(nèi)部，所以一切都顯得很順利。我想這才是一個(gè)真正的代碼質(zhì)量高的網(wǎng)站。

如何解決HTML5在實(shí)際應(yīng)用中的兼容性問(wèn)題

一、"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的概念

2010年，Ethan Marcotte提出了"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"（Responsive Web Design）這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"到底是怎么做到的？其實(shí)并不難。

首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。

meta name="viewport" content="width=device-width, initial-scale=1" /

viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。

所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9。對(duì)于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

!--[if lt IE 9]

script src=""/script

![endif]--

三、不使用絕對(duì)寬度

由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要。

具體說(shuō)，CSS代碼不能指定像素寬度：

width:xxx px;

只能指定百分比寬度：

width: xx%;

或者

width:auto;

四、相對(duì)大小的字體

字體也不能使用絕對(duì)大小（px），而只能使用相對(duì)大小（em）。

body {

font: normal 100% Helvetica, Arial, sans-serif;

}

上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素。

h1 {

font-size: 1.5em;

}

然后，h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）。

small {

font-size: 0.875em;

}

small元素的大小是默認(rèn)大小的0.875倍，即14像素（14/16=0.875）。

五、流動(dòng)布局（fluid grid）

"流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

另外，絕對(duì)定位（position: absolute）的使用，也要非常小心。

六、選擇加載CSS

"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。

link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 400px)"

href="tinyScreen.css" /

上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。

link rel="stylesheet" type="text/css"

media="screen and (min-width: 400px) and (max-device-width: 600px)"

href="smallScreen.css" /

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

除了用html標(biāo)簽加載CSS文件，還可以在現(xiàn)有CSS文件中加載。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

七、CSS的@media規(guī)則

同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。

@media screen and (max-device-width: 400px) {

.column {

float: none;

width:auto;

}

#sidebar {

display:none;

}

}

上面的代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動(dòng)（float:none）、寬度自動(dòng)調(diào)節(jié)（width:auto），sidebar塊不顯示（display:none）。

八、圖片的自適應(yīng)（fluid image）

除了布局和文本，"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。

這只要一行CSS代碼：

img { max-width: 100%;}

這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效，所以可以寫成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好寫成：

img { width: 100%; }

此外，windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用IE的專有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

不過(guò)，有條件的話，最好還是根據(jù)不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實(shí)現(xiàn)

如何處理html5新標(biāo)簽的瀏覽器兼容性問(wèn)題

HTML5已形成了最終的標(biāo)準(zhǔn)，概括來(lái)講，它主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

新增的元素有繪畫 canvas ，用于媒介回放的 video 和 audio 元素，本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失，而sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除，此外，還新增了以下的幾大類元素。

內(nèi)容元素，article、footer、header、nav、section。

表單控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列這些：

顯現(xiàn)層元素：basefont，big，center，font, s，strike，tt，u。

性能較差元素：frame，frameset，noframes。

如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分HTML和HTML5？

處理兼容問(wèn)題有兩種方式：

1.IE8/IE7/IE6支持通過(guò)document.方法產(chǎn)生的標(biāo)簽，利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽。

2.使用是html5shim框架

另外，DOCTYPE聲明的方式是區(qū)分HTML和HTML5標(biāo)志的一個(gè)重要因素，此外，還可以根據(jù)新增的結(jié)構(gòu)、功能元素來(lái)加以區(qū)分。

當(dāng)前標(biāo)題：html5兼容性問(wèn)題,css常見兼容性問(wèn)題
瀏覽地址：http://chinadenli.net/article1/dsshjid.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、定制網(wǎng)站、App開發(fā)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)