【分享】页面与页面中引入的外部 CSS 文件编码不一致引起的兼容性问题

WebAdvocate 2010-08-27 05:32:32

加精

问题
上周在论坛里发现一个问题，链接地址：http://topic.csdn.net/u/20100822/22 /518c91ea-f3e8-48e8-84b8-286b6639cc8a.html，这个问题看起来很蹊跷，有些CSS起作用了，有些却没有起作用，仔细查了查，问题出在其注释的：“/*列表*/”这里，具体的应该是“列”字这里。
于是乎，我就顺理成章的想到了可能是由编码引起的问题。果不其然……
但是，回来又想，是不是我所解释的，原因是不同浏览器对编码乱的程度不一样呢？原回复在此：
你的页面的编码是 charset=UTF-8
但是你的CSS文件 http://skyming.13.bname.us/question/juzhishe/list.php_files/category.css 的编码是GB2312，而且你的CSS文件里还有中文汉字，所以，页面在编码的时候，你的CSS文件会出现乱码，这时候，各浏览器的处理又有区别，因此，IE6就挂掉了。
大致测试了一下，bug出在这里:
/*列表*/
解决方法：统一CSS文件和HTML文件的编码格式

后来，又仔细的研究了一下这个问题，不敢私藏，故拿出跟各位共享，判能一起讨论，看正确与否。

现象
例子：
test.html(文件编码为UTF-8)：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="c.css"/>

<p>内容文本</p>

其中c.css(文件编码为GBK)：

p {

    height: 115px;

    width: 200px;

    border: 1px solid red;

}

/*列表*/

p {

    background-color: green;

}

以上代码在IE6中运行的截图：

其他浏览器中的截图：

原因
到底是因为什么呢？再看一个测试用例：
test.html (文件为GBK编码)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

p {

height: 115px;

width: 200px;

border: 1px solid red;

}

/*列表*/

p {

background-color: green;

}

以上代码，可以将GBK转为UTF-8，显示在页面上。
在IE6中，显示出的文本为：
p { height: 115px; width: 200px; border: 1px solid red; } /*??� p { background-color: green; }

其他浏览器中显示：
p { height: 115px; width: 200px; border: 1px solid red; } /*�б�*/ p { background-color: green; }

很明显，IE6中编码的时候，不知道怎么把闭合标签给弄丢了。所以，自他以后的内容都被当作是注释内容，问题就这样出现了。

标准
根据 CSS 2.1 规范的描述，应按照以下优先级来确定一个外部 CSS 文件的编码：
1. HTTP 响应头中 "Content-Type" 字段的 "charset" 参数指定的编码。
2. BOM 以及/或者 @charset 定义的编码。
3. <link charset=""> 或其他链接机制提供的元数据（如果有的话）指定的编码。
4. 引入该 CSS 文件的 HTML 或另一个 CSS 文件（如果有的话）中已确定的编码。
5. 如果以上几步都没能确定编码，则假定其编码为 UTF-8。

关于上述内容的详细信息，请参考 CSS 2.1 规范 4.4 CSS style sheet representation 中的内容。

解决
既然问题是由编码不一致引起的，那么解决方案有二，要么给CSS文件的最前头加一个@charset "GB2312"; 指明CSS文件的编码；要么，创建CSS的时候，让它的编码格式跟页面中指定的相同。

两相权衡，还是第一种解决方案好点儿。

更多兼容性问题：
【分享】浏览器兼容性问题目录

...全文