發(fā)布日期：2017/6/15

百度權(quán)重查詢 站長交易 友情鏈接交換 網(wǎng)站監(jiān)控 服務(wù)器監(jiān)控 seo監(jiān)控

前一段某項(xiàng)目中頁面在IE6倏忽出現(xiàn)了亂碼，當(dāng)時(shí)做了各種排查，好終推斷是使用了HTML5的DOCTYPE和Charset以及中文注釋的問題，于是一時(shí)采用舊的Charset方法來修復(fù)了下，后面亂碼再?zèng)]出現(xiàn)。

其實(shí)一向不太確定HTML5的Charset能否被IE6識(shí)別，于是做了一些測試。

先說下兩種Charset聲明方法，其實(shí)大家應(yīng)該都很熟悉的：

<meta charset=“UTF-8”><！--HTML5方法-->

<meta http-equiv=“content-type” content=“text/html; charset=UTF-8”><！--HTML4及XHTML方法-->

后面我們簡稱種方法為HTML5方法，第二種方法為HTML4方法。

測試環(huán)境：

Windows XP Sp2，中文版+英文版兩個(gè)版本的IE6，及Windows 7 下IE9及其各種兼容模式和Chrome、Firefox等的當(dāng)前Stable版本；

因?yàn)槲覀冇玫降腍TML文件都是UTF8編碼的，所以這里測試用例的HTML文件也都是UTF8（無BOM）格式，項(xiàng)目用gbk或者gb2312編碼的類似。

測試用了兩種方法：

meta方法：包括HTML5和HTML4兩種方法及其混搭

服務(wù)器端方法：服務(wù)器端設(shè)置charset，這里使用nginx，charset=utf-8

測試用例——Meta方法：

UTF8

UTF8 HTML4方法

UTF8-GB2312

UTF8+中文注釋在meta前

UTF8+中文注釋在HTML和HEAD之間

GB2312

GB2312 HTML4方法

GB2312-UTF8

GB2312+中文注釋在meta前

GB2312+中文注釋在HTML和HEAD之間

測試用例——服務(wù)器方法：

服務(wù)器設(shè)置編碼

meta編碼和服務(wù)器編碼不一致

上面各用例均可直接訪問

測試效果：

測試個(gè)用例在各瀏覽器中體現(xiàn)一致；

UTF-8的方案中，悉數(shù)正常顯示；

charset聲明為gb2312，因?yàn)楹臀臋n的UTF-8編碼不符，所以悉數(shù)亂碼；

1，6用HTML5 charset分別定義了UTF8和gb2312，1正常顯示沒有亂碼，6亂碼——在中文版IE6和英文版IE6均如此，說明IE6能識(shí)別HTML5的charset；

1，2用例和6，7用例，分別用單獨(dú)用HTML5和HTML4方法定義charset，效果一樣；

值得注重的是，第三個(gè)用例先用HTML5的方法設(shè)定UTF-8編碼，再用HTML4的編碼設(shè)定為gb2312，但頁面顯示正常，而第八個(gè)用例反之，效果頁面顯示亂碼，所以可以推斷，第二個(gè)meta標(biāo)簽并沒有生效；

4、5用例并沒有亂碼，說明單純的HTML注釋并不一定會(huì)導(dǎo)致亂碼，這里沒有測試這兩個(gè)位置加載不同編碼的js等外部文件時(shí)可能發(fā)生的情況；

服務(wù)器方法中，用例1并沒有效meta設(shè)置charset，頁面顯示正常，而用例2中用meta設(shè)置charset=gb2312，與服務(wù)器版本不同，但依然沒有亂碼，說明服務(wù)器端返回的charset優(yōu)先級(jí)更高；

結(jié)論：

其實(shí)關(guān)于charset的規(guī)范，Google的開發(fā)文檔中也有詮釋：

要在HEAD標(biāo)簽中；

在任何其它內(nèi)容之前，也就是要在HEAD中的好前面；

包括空格和DOCTYPE聲明在內(nèi)，要在前512個(gè)字節(jié)之內(nèi)；

HTML5和HTML4兩種寫法效果一樣，用其中之一即可；

上面的測試也證實(shí)，第4條是準(zhǔn)確的，兩種寫法均可。

另外，服務(wù)器端設(shè)置charset也是很不錯(cuò)的做法，charset聲明直接在HTTP response中獲得，效率更高，而且更方便。Google目前在用這種方法。

所以只要頁面寫的規(guī)范，并不會(huì)出現(xiàn)亂碼的問題。所以可以勇敢的使用HTML5的DOCTYPE和Charset聲明。但是請(qǐng)盡量按照上面說的Google文檔中的規(guī)范來，頭部不要放太多東西，js等外部資源更要放到后面去。

測試中難免會(huì)有遺漏，假如有不準(zhǔn)確的地方，迎接指正并一路討論~~

文章來源：前端觀察