RN5001: Chrome Safari 中 '@charset' 声明的位置错误将导致其后的一个规则集无效

标准参考•
问题描述•
造成的影响•
受影响的浏览器•
问题分析•
解决方案•
参见

作者：孙东国

标准参考

CSS 2.1 规范中有以下描述：

At-rules 以关键字 '@' 开始，标识符紧随其后（即 '@' 与标识符之间不允许有任何内容）。
一个 At-rule 包含直到下一个分号 (;) 或下一个块（一对可匹配的大括号间的内容）间的所有内容，以二者中先出现的为准。
@charset 规则必须出现在样式表的最开始，它前边不能有任何字符。用户代理（即浏览器）必须忽略任何不是在样式表最开始的 @charset 规则。

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

问题描述

在 Chrome Safari 中，如果一段 CSS 代码（无论是外部文件还是页内嵌入）的 '@charset' 规则之前有非空白字符或注释的内容存在，那么该规则之后的一个规则集将失效。

造成的影响

该问题将造成页面效果在 Chrome Safari 中与预期的效果不符。

受影响的浏览器

Chrome Safari

问题分析

根据 CSS 2.1 规范的描述，当一个 '@charset' 规则没有出现在样式表的最开始时，浏览器应该忽略该规则。

但在 Chrome Safari 中，如果 '@charset' 规则之前有非空白字符或注释的内容存在，那么该规则之后的一个规则集将失效。

举例如下：

HTML 代码（编码为 UTF-8）：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <link rel="stylesheet" type="text/css" href="css.css" media="all" /> </head> <body>
                <h1>@charset</h1> </body> </html>

以上页面引入的 css.css 的代码（编码为 UTF-8）：

h1{width:100px; height:100px; background:red;} @charset "UTF-8"; h1{background:blue;} h1{font:bold
                12px/100px Verdana; color:white;}

以上代码在各浏览器中表现如下：

Chrome Safari	其他浏览器

可见，Chrome Safari 中的样式集 'h1{background:blue;}' 没有生效。

该问题在 CSS 代码写在页内的情况下表现相同。

将 '@charset "UTF-8";' 之前的 'h1{width:100px; height:100px; background:red;}' 替换为一个 At-rule 如另一个 '@charset "UTF-8"'，表现相同。如：

@charset "UTF-8"; @charset "UTF-8";h1{background:blue;} h1{ width:100px; height:100px; font:bold
                12px/100px Verdana; }

以上代码在 Chrome Safari 中，标记为这个颜色的部分触发此问题，导致标记为这个颜色的部分被忽略。

解决方案

要使用 '@charset' 规则，请确保将其放在样式表的最开始，前边不能有任何字符。

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4
测试页面:	css_via_an_external_style_sheet.html css_within_the_html_document.html
本文更新时间:	2010-08-03