卢森宝亚消防泵,在办公室你轻点啊视频,国产爱视频,乱伦av网站,欧美一级人爱视频,午夜无码伦费影视在线观看果冻
解決IE瀏覽器不兼容H5標簽的辦法有哪些？
日期：2019-04-03 來源：神州華宇HTML5有兩大特點：首先，強化了Web網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等Web應(yīng)用的功能。
廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服 務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效增強網(wǎng)絡(luò)應(yīng)用的標準集。
目前HTML5已向開發(fā)人員提供了很多新的標簽，如section，nav，article，header和footer等。這些標簽語義化程度高，會被經(jīng)常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識別和正常使用。
一、HTML5標簽在瀏覽器展示存在的問題
對于現(xiàn)階段來說，使用HTML5標簽可能遇到的最大問題就是如何在不支持新標簽的瀏覽器中做恰當?shù)奶幚怼．斘覀冊陧撁嬷惺褂肏TML5元素時，可能會得到三種不同的結(jié)果。
結(jié)果1：標簽被當作錯誤處理并被忽略。那么DOM構(gòu)建的時候，就會當作這個標簽不存在。
結(jié)果2：標簽會被當作錯誤處理，并在DOM構(gòu)建的時候依然會按照預期的代碼進行創(chuàng)建，并且HTML標簽會被構(gòu)造成行內(nèi)元素（也就是說雖然不能識別，但是代碼里section標簽依然會在dom中創(chuàng)建一個對應(yīng)section節(jié)點，但是屬于行內(nèi)元素）。
結(jié)果3：標簽被識別為HTML5標簽，然后用DOM節(jié)點對其進行替換。DOM在構(gòu)建的時候和預想的一致，并且合適的樣式會應(yīng)用到標簽上（大部分情況下是塊級元素）。
有一個具體的例子，大家思考一下下面的代碼：
<div class="outer">
<section>
<h1>title</h1>
<p>text</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之前的版本會認為section標簽是一個錯誤，并直接將其忽略，那么h1和p標簽會被解析，然后成為div標簽的子節(jié)點。</section>也會被認為是一個錯誤并直接跳過。在這些瀏覽器中實際有效的代碼是這樣的：
<div class="outer">
<h1>title</h1>
<p>text</p>
</div>
那么，舊版本的IE瀏覽器除了生成的DOM結(jié)構(gòu)和其他瀏覽器不一樣，其對不可識別標簽的容錯能力還是很棒的。因為section節(jié)點沒有在DOM樹中構(gòu)建，所以也就不能給其增加樣式。這種情況對應(yīng)結(jié)果1。
當然，支持HTML5的瀏覽器比如IE9，F(xiàn)irefox4+，Safari5+會創(chuàng)建正確的DOM結(jié)構(gòu)，然后這些標簽會默認附帶HTML5規(guī)范中定義的默認樣式。
那么，我們所面臨的最大問題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結(jié)構(gòu)，并且含有不同的樣式。
二、如何解決HTML5標簽不兼容
或許會有很多人在質(zhì)疑：為什么老式的瀏覽器不能識別這些標簽？其實錯不在瀏覽器，因為在那個時代根本不存在這種標簽，所以不能正確識別出來，而這種不尋常 的標簽識別令DOM結(jié)構(gòu)變得異常。對此，人們想出了很多在現(xiàn)階段頁面中使用HTML5元素的解決方案。每一個解決方案為了做到兼容都會遇到一些特定的問題。跟大家分享一下：
1、實現(xiàn)標簽被識別
我曾做個一個測試（以IE8為例），是一個文章標題和藍色字的文章內(nèi)容，其中文章內(nèi)容用了article標簽。代碼如下：
<!DOCTYPE html>
<html xmlns="
<head>
<meta charset="UTF-8" />
<title>測試</title>
<style>
article{color:#06F;}
</style>
</head>
<body>
<h1>文章標題</h1>
<article>
這是文章內(nèi)容，應(yīng)該是一段藍色的文字。在老式瀏覽器中，如果不做hack將顯示異常。
</article>
</body>
</html>
在IE8瀏覽器中，顯示如下：IE8不能識別article標簽， 定義在標簽上的CSS樣式?jīng)]有起作用。 在IE8中，<article>被解釋成命名為<article />和</article />兩個空的標簽元素，與文章內(nèi)容并列為兄弟節(jié)點，如下圖所示：
既然因為不能識別標簽而不能使用，那我的解決辦法就是讓標簽被識別出來。所幸，簡單地通過 document.createElement（tagName）即可以讓瀏覽器識別標簽和CSS引擎知道該標簽的存在。假設(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)建，那么瀏覽器就可以識別這些標簽，并可以將其在DOM樹中構(gòu)建，然后允許開發(fā)者對其應(yīng)用樣式。
這個方法可以確保HTML5標簽能在舊版本IE中對應(yīng)創(chuàng)建DOM節(jié)點，然后可以對其應(yīng)用樣式。這個方法將HTML5塊級元素設(shè)置成display:block，從而可以在各個瀏覽器中做到兼容。
今天測試把網(wǎng)頁改成了HTML5的，調(diào)試了一下，在FF和Opera中都顯示正常了，到了IE6上卻變得面目全非了。對此我還特意去找了一些使用JS代碼支持HTML5標簽元素的方法，在此也跟大家分享一下：
（1）使用html5shiv
查看了一下，發(fā)現(xiàn)了html5shiv能解決這個問題，可以把HTML5的新元素轉(zhuǎn)換成IE6認識的內(nèi)容。只需要在你的head中調(diào)用這段代碼就行：
<!--if lt IE 9]>
<script src=">
<![endif]-->
當然你也可以直接把這個文件下載到自己的網(wǎng)站上。但這個文件必須在head標簽中調(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=">
<![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)勢并不能改變我對這個方法的不認同。
3、Namespace hack
永遠不要缺乏使用hack解決問題的能力，在IE中還有其他技術(shù)來讓瀏覽器識別不明的標簽。這個來自Elco Klingen日志的方法一開始引起了廣泛的關(guān)注。該技術(shù)包含了一個XML形式的命名空間，并使用了含有namespace前綴的元素。例如：
掃碼 - 溝通建站
中國·北京北清路1號院珠江摩爾國際大廈8-1412
copyright@2008-2023 神州華宇 京ICP備12020161號
