頁(yè)面在360瀏覽器下顯示不正常的兼容性問(wèn)題
發(fā)布時(shí)間：2014-05-28 16:05:39 作者：佚名 
我要評(píng)論
我要評(píng)論若干頁(yè)面在360的瀏覽器上顯示不正常，而在其他的瀏覽器上，皆為正常狀態(tài)，問(wèn)題出在哪，下面針對(duì)此問(wèn)題做下分析，希望對(duì)大家有所幫助
引言： 在Web應(yīng)用的開發(fā)過(guò)程中，發(fā)現(xiàn)若干頁(yè)面在360的瀏覽器上顯示不正常，而在其他的瀏覽器上，皆為正常狀態(tài)，問(wèn)題出在哪里呢？
問(wèn)題的提出：
Web頁(yè)面在360的瀏覽器上，顯示不正確。 但是在Firefox、chrome和IE8+以上的瀏覽器上，都是顯示正常的。
問(wèn)題的分析
1. 檢查了一些Javascript框架，標(biāo)準(zhǔn)的jquery類庫(kù)1.x系列，確認(rèn)其工作正常，問(wèn)題不是在于Javascript方面。
2. 排查掉HTML標(biāo)簽內(nèi)容的顯示 問(wèn)題。
3. 懷疑是CSS在不同瀏覽器下的兼容性問(wèn)題，見過(guò)排查，沒(méi)有發(fā)現(xiàn)問(wèn)題。
4. 排查360瀏覽器，發(fā)現(xiàn)其在當(dāng)前頁(yè)面的顯示中，默認(rèn)使用了IE7的渲染引擎。同時(shí)，在IE7的環(huán)境下，重現(xiàn)了類似情況。
5. 本質(zhì)上，這個(gè)顯示問(wèn)題是頁(yè)面在IE7下面的兼容性顯示問(wèn)題。
關(guān)于360瀏覽器或搜狗瀏覽器的分析：
對(duì)于此類瀏覽器，有時(shí)候號(hào)稱雙核或者N核的高速瀏覽器，其本質(zhì)上就是本地IE瀏覽器的殼子，外加Chrome抑或Firefox的內(nèi)核，大部分情況下都是WebKit系列內(nèi)核。
那么，此類瀏覽器依據(jù)什么信息，來(lái)判斷頁(yè)面的渲染模式呢？答案就是可以指令運(yùn)行當(dāng)前頁(yè)面的瀏覽器使用何種渲染引擎的聲明。
<meta http-equiv="X-UA-Compatible" content="IE=8">
這里，就是指令瀏覽器至少要使用IE8以上的渲染引擎來(lái)，渲染頁(yè)面，從而規(guī)避掉IE7下的問(wèn)題。
關(guān)于Doctype
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因?yàn)?HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語(yǔ)言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
分析： doctype所要解決的就是使用何種HTML的語(yǔ)法解析器和渲染器。比如特定HTML標(biāo)簽的使用，則依賴于HTML Doctype的使用。
問(wèn)題的提出：
Web頁(yè)面在360的瀏覽器上，顯示不正確。 但是在Firefox、chrome和IE8+以上的瀏覽器上，都是顯示正常的。
問(wèn)題的分析
1. 檢查了一些Javascript框架，標(biāo)準(zhǔn)的jquery類庫(kù)1.x系列，確認(rèn)其工作正常，問(wèn)題不是在于Javascript方面。
2. 排查掉HTML標(biāo)簽內(nèi)容的顯示 問(wèn)題。
3. 懷疑是CSS在不同瀏覽器下的兼容性問(wèn)題，見過(guò)排查，沒(méi)有發(fā)現(xiàn)問(wèn)題。
4. 排查360瀏覽器，發(fā)現(xiàn)其在當(dāng)前頁(yè)面的顯示中，默認(rèn)使用了IE7的渲染引擎。同時(shí)，在IE7的環(huán)境下，重現(xiàn)了類似情況。
5. 本質(zhì)上，這個(gè)顯示問(wèn)題是頁(yè)面在IE7下面的兼容性顯示問(wèn)題。
關(guān)于360瀏覽器或搜狗瀏覽器的分析：
對(duì)于此類瀏覽器，有時(shí)候號(hào)稱雙核或者N核的高速瀏覽器，其本質(zhì)上就是本地IE瀏覽器的殼子，外加Chrome抑或Firefox的內(nèi)核，大部分情況下都是WebKit系列內(nèi)核。
那么，此類瀏覽器依據(jù)什么信息，來(lái)判斷頁(yè)面的渲染模式呢？答案就是可以指令運(yùn)行當(dāng)前頁(yè)面的瀏覽器使用何種渲染引擎的聲明。
<meta http-equiv="X-UA-Compatible" content="IE=8">
這里，就是指令瀏覽器至少要使用IE8以上的渲染引擎來(lái)，渲染頁(yè)面，從而規(guī)避掉IE7下的問(wèn)題。
關(guān)于Doctype
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因?yàn)?HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語(yǔ)言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
分析： doctype所要解決的就是使用何種HTML的語(yǔ)法解析器和渲染器。比如特定HTML標(biāo)簽的使用，則依賴于HTML Doctype的使用。
相關(guān)文章
這篇文章主要介紹了淺談原生頁(yè)面兼容IE9問(wèn)題的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-12-16新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-11-30css hack之\9和\0就可能對(duì)hack IE11\IE9\IE8無(wú)效
每次設(shè)計(jì)一張網(wǎng)頁(yè)或一個(gè)表單，都被各種瀏覽器的兼容問(wèn)題傷透腦筋，尤其是IE家族。在做兼容性設(shè)計(jì)時(shí)，我們往往會(huì)使用各種瀏覽器能識(shí)別的獨(dú)特語(yǔ)法進(jìn)行hack，從而達(dá)到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20
這篇文章主要介紹了解決CSS瀏覽器兼容性問(wèn)題的4種方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-02-28
這篇文章主要介紹了常見的瀏覽器兼容性問(wèn)題(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-02-20
這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-02-12淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題
這篇文章主要介紹了淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題，詳細(xì)的介紹了幾種我遇到的問(wèn)題和解決方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-26
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-14
對(duì)常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)
這篇文章主要介紹了對(duì)常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-20
