页面与页面中引入的外部 CSS 文件编码不一致引起的兼容性有关问题

【分享】页面与页面中引入的外部 CSS 文件编码不一致引起的兼容性问题
问题
上周在论坛里发现一个问题，链接地址：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)：

HTML code

<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)：

CSS code

p {    height: 115px;    width: 200px;    border: 1px solid red;}/*列表*/p {    background-color: green;}

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

其他浏览器中的截图：


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

HTML code

<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的时候，让它的编码格式跟页面中指定的相同。

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

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


[解决办法]
学习了。
[解决办法]
这个干吗的
[解决办法]
学习一下！
[解决办法]
好东西，继续关注！呵呵，不过我更期待JS的OO和位操作的整套精读文章！
[解决办法]
非常好
第一种方法我也常用
但是，第二种，还真没想过，楼主勤于思考，很值得学习呀！

[解决办法]
的确，因为编码问题，很多时候比较麻烦！现在用的utf-8多一点了，毕竟是通用的！
[解决办法]
可以不要写中文注释
[解决办法]
编码是个复杂的事，做多了应该会比较上手吧。
[解决办法]
非常好
第一种方法我也常用
但是，第二种，还真没想过，楼主勤于思考，很值得学习呀！

[解决办法]
javascript都用在哪些方面，楼主给讲解一下 呵呵
[解决办法]
还是使用utf-8吧，通用的
[解决办法]
学习学习~
[解决办法]
强烈支持楼主的分享
[解决办法]
干多了 就不会出现这类问题了
[解决办法]
非常透彻，学习了！
[解决办法]
好好学习天天向上
[解决办法]
路过，路过 ，学习
[解决办法]
天天10分帖子！
[解决办法]
好好学习
[解决办法]
新手，学习了

查看更多 下一篇