【分享】@charset使用注意事项
在前面的帖子里,我们使用 @charset 来解决CSS文件和页面编码不一致的问题,见:【分享】页面与页面中引入的外部 CSS 文件编码不一致引起的兼容性问题
于@charset 本身来说,也有兼容性问题。
例子test.html(UTF-8编码):
HTML code
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="d.css" media="all"/>
<h1>@charset</h1>
d.css(UTF-8编码):
CSS code
h1{width:100px; height:100px; background:red;}
@charset "UTF-8";
h1{background:blue;}
h1{font:bold 12px/100px Verdana; color:white;}
先问个问题,这段代码有问题吗?呃,,看下面的解释吧!
规则CSS 2.1 规范中有以下描述
:@charset 规则必须出现在样式表的最开始,它前边不能有任何字符。用户代理(即浏览器)必须忽略任何不是在样式表最开始的 @charset 规则。见W3C CSS2.1 文档:http://www.w3.org/TR/CSS21/syndata.html#charset
很明显,上面代码中的 @charset 的位置是不符合标准的。在这种情况下,浏览器应该忽略此规则。
截图CSS2.1中只是规定了应当忽略@charset ,但是没有说会不会影响其中样式。看以上代码在各浏览器中的截图。
Chrome和Safari中:
其他浏览器:
出什么事儿了?仔细看看,在Chrome和Safari中,有一条CSS规则(
h1{background:blue;})竟然没有起作用……
可见根据 CSS 2.1 规范的描述,当一个 '@charset' 规则没有出现在样式表的最开始时,浏览器应该忽略该规则。
但在 Chrome Safari 中,如果 '@charset' 规则之前有非空白字符或注释的内容存在,那么该规则之后的一个规则集将失效。
解决要使用 '@charset' 规则,请确保将其放在样式表的最开始。
原文来自http://www.w3help.org/zh-cn/causes/RN5001
更多兼容性问题:【分享】浏览器兼容性问题目录
------解决方案--------------------
......... 打酱油的 路过