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