打印

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

作者:孙东国

标准参考

CSS 2.1 规范中有以下描述:

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

关于上述内容的详细信息,请参考 CSS 2.1 规范 4.1.5 At-rules4.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 其他浏览器
snapshot snapshot

可见,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

关键字

CSS @charset 规则集失效