【分享】页面与页面中引入的外部 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多一点了，毕竟是通用的！
------解决方案--------------------
可以不要写中文注释
------解决方案--------------------
编码是个复杂的事，做多了应该会比较上手吧。
------解决方案--------------------
非常好
第一种方法我也常用
但是，第二种，还真没想过，楼主勤于思考，很值得学习呀！