`

各浏览器在 HTML 页面与页面中引入的外部 CSS 文件编码不一致时表现不同

 
阅读更多

标准参考

根据 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 文件的编码与引入该文件的 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 其他浏览器
snapshot snapshot

可见,IE6 把 CSS 文件从“黑体”二字到规则结束的样式都没有起作用,其他浏览器中仅“黑体”二字解析错误。

产生这种差异的原因是各浏览器对与这种错误的容错方式不同。

按照规范的规定,在这种情况下,浏览器会认为 CSS 文件的编码与页面一致,即 UTF-8,但 GB2312 编码下的一个中文字符是 2 个字节,在 UTF-8 编码下则为 3 个字节,在把 GB2312 编码下的“黑体”二字当作 UTF-8 编码的文字来解析的时候,得到的是“����”,这并不是预期的值。正是这个值导致了样式定义在各浏览器中都无法按照预期被解析。

解决方案

当 HTML 文件或 CSS 文件要引入一个不同编码的 CSS 文件时,要明确声明被引入的 CSS 文件的编码。

如以上的举例,在 CSS 文件的开头加上一行1

@charset "GB2312";

或者在各文件的 HTTP 响应头中声明该文件实际使用的编码。

注:
1. 虽然 CSS 2.1 规范也允许在 LINK 标签上添加 'charset' 属性来指定编码,但 IE6 IE7 IE8(Q) 不支持。

 

解决方案:

在CSS文件中和link标签中同时指定正确的字符集

分享到:
评论

相关推荐

    HTML外部引用CSS文件不生效原因分析及解决办法

    作为一个前端小白,鼓捣了几...然后再我的html文件里面去引入这个外部css: XML/HTML Code复制内容到剪贴板 &lt;link rel=stylesheet type=text/css href=css/style.css&gt;  在浏览器一刷新。。哇,kao。竟然没

    CSS在不同浏览器中兼容问题

    CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题

    根据不同浏览器加载不同css文件

    资源名称:根据不同浏览器加载不同css文件资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    CSS属性、浏览器兼容与网页布局

    CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...

    CSS浏览器兼容问题

    CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。

    不同浏览器 不同css学习总结

    css的颜色,在ie和ff中是不同的,一个是16进制的数字一个是二进制的数字组合,这仅仅是一点点的不同,那么如何兼容各个浏览器,写出比较好的浏览器呢。这个小小的总结应该可以给你一些提示,不是很全面,但是还算...

    各浏览器CSS hack兼容表

    各浏览器CSS hack兼容表各浏览器CSS hack兼容表

    js 动态引用外部js,css文件

    js 动态引用外部js,css文件 可以动态修改网页 样式。。。

    动态加载Css 浏览器判断

    动态加载Css 浏览器判断 Browes 浏览器判断

    JS判断浏览器分辨率自动调用不同CSS

    JS判断浏览器分辨率自动调用不同CSS!

    各浏览器默认值.css

    介绍了各个浏览器的css默认值,为前台开发提供了一定的帮助!

    HTML5 + CSS3 制作的图文并茂页面

    HTML5和CSS3制作的展示类页面,使用了HTML5及CSS3的新标签和特性,页面图文并茂。兼容IE9+、Chrome、Firefox等主流浏览器;页面兼容不同分辨率的屏幕。包含一个html文件,四个css文件,一个js文件及若干图片。由于...

    css 浏览器默认样式清除

    -通常情况下编写网页时需要去除浏览器的默认样式 重置样式表 :专门用来对浏览器的样式进行重置 reset:直接取消了浏览器的默认样式 normalize :对默认样式进行了统一 引用样式表: ...

    兼容各浏览器的css渐变

    css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器

    ES5基础04. 引入外部CSS样式,以Bootstrap为例

    [JavaScript][JS][前端教學]_ES5基礎#04._引入外部CSS樣式,以Bootstrap為例

    区别不同浏览器CSS hack

    IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*,但不能识别 !important, IE7能识别*,也能识别!important; FF不能识别*,但能识别!important;

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    css全局样式,css外部文件

    css全局样式,css外部文件,取消浏览器默认样式,有助于优化代码,节省带宽。

    各浏览器css兼容写法

    各浏览器css兼容写法各浏览器css兼容写法

    浏览器兼容.doc-CSS hack姐姐兼容性问题

    这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

Global site tag (gtag.js) - Google Analytics