标准参考
根据 CSS 2.1 规范的描述,应按照以下优先级来确定一个外部 CSS 文件的编码:
- HTTP 响应头中 "Content-Type" 字段的 "charset" 参数指定的编码。
- BOM 以及/或者 @charset 定义的编码。
- <link charset=""> 或其他链接机制提供的元数据(如果有的话)指定的编码。
- 引入该 CSS 文件的 HTML 或另一个 CSS 文件(如果有的话)中已确定的编码。
- 如果以上几步都没能确定编码,则假定其编码为 UTF-8。
关于上述内容的详细信息,请参考 CSS 2.1 规范 4.4 CSS style sheet representation
中的内容。
问题描述
如果一个外部 CSS 文件的编码与引入该文件的 HTML 文件的编码不一致,并且没有显式的声明该 CSS 文件的编码,在某些情况下会造成 CSS 的解析错误。
造成的影响
该问题将造成页面布局在一些浏览器中与预期的效果不符。
受影响的浏览器
问题分析
对于一个未显式声明编码的 CSS 文件,浏览器会将其编码认为与引入该文件的文件的编码一致。在一些特定的情况下,将造成 CSS 代码解析异常。举例如下:
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"/>
</head>
<body>
<h1>内容文本</h1>
</body>
</html>
以上页面引入的 css.css 的代码(编码为 GB2312):
h1 {
margin:0;
width:100px;
height:100px;
background:blue;
font:20px/100px "黑体";
text-decoration:underline;
color:red;
}
假设上述两个文件均为在 HTTP 响应头中设定编码,在各浏览器中表现如下:
IE6
其他浏览器
|
|
可见,IE6 把 CSS 文件从“黑体”二字到规则结束的样式都没有起作用,其他浏览器中仅“黑体”二字解析错误。
产生这种差异的原因是各浏览器对与这种错误的容错方式不同。
按照规范的规定,在这种情况下,浏览器会认为 CSS 文件的编码与页面一致,即 UTF-8,但 GB2312
编码下的一个中文字符是 2 个字节,在 UTF-8 编码下则为 3 个字节,在把 GB2312 编码下的“黑体”二字当作 UTF-8
编码的文字来解析的时候,得到的是“����”,这并不是预期的值。正是这个值导致了样式定义在各浏览器中都无法按照预期被解析。
解决方案
当 HTML 文件或 CSS 文件要引入一个不同编码的 CSS 文件时,要明确声明被引入的 CSS 文件的编码。
如以上的举例,在 CSS 文件的开头加上一行1
:
@charset "GB2312";
或者在各文件的 HTTP 响应头中声明该文件实际使用的编码。
分享到:
相关推荐
作为一个前端小白,鼓捣了几...然后再我的html文件里面去引入这个外部css: XML/HTML Code复制内容到剪贴板 <link rel=stylesheet type=text/css href=css/style.css> 在浏览器一刷新。。哇,kao。竟然没
CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题
资源名称:根据不同浏览器加载不同css文件资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。
css的颜色,在ie和ff中是不同的,一个是16进制的数字一个是二进制的数字组合,这仅仅是一点点的不同,那么如何兼容各个浏览器,写出比较好的浏览器呢。这个小小的总结应该可以给你一些提示,不是很全面,但是还算...
各浏览器CSS hack兼容表各浏览器CSS hack兼容表
js 动态引用外部js,css文件 可以动态修改网页 样式。。。
动态加载Css 浏览器判断 Browes 浏览器判断
JS判断浏览器分辨率自动调用不同CSS!
介绍了各个浏览器的css默认值,为前台开发提供了一定的帮助!
HTML5和CSS3制作的展示类页面,使用了HTML5及CSS3的新标签和特性,页面图文并茂。兼容IE9+、Chrome、Firefox等主流浏览器;页面兼容不同分辨率的屏幕。包含一个html文件,四个css文件,一个js文件及若干图片。由于...
-通常情况下编写网页时需要去除浏览器的默认样式 重置样式表 :专门用来对浏览器的样式进行重置 reset:直接取消了浏览器的默认样式 normalize :对默认样式进行了统一 引用样式表: ...
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
[JavaScript][JS][前端教學]_ES5基礎#04._引入外部CSS樣式,以Bootstrap為例
IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*,但不能识别 !important, IE7能识别*,也能识别!important; FF不能识别*,但能识别!important;
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
css全局样式,css外部文件,取消浏览器默认样式,有助于优化代码,节省带宽。
各浏览器css兼容写法各浏览器css兼容写法
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。