乱码引起的CSS失效原理,解决技巧。

由于一个中文是两个字符组成,在编码不一致的情况下会引发字符的“重新”组合,(半个汉字的编码字符与后面的字符组合生成新的“文字”)引发原本的结束符合“变异”,从而导致找不到结束符号,使得后面的CSS就会失效。

小技巧1:CSS中出现的乱码都是由于CSS字符编码与页面的字符编码不一致所引起的,因此最直接的方法就是使字符编码一致。将CSS指定编码类型,例:@charset "utf-8";(指定编码类型为utf-8,须写在CSS文件第一行)
小技巧2:CSS中出现的乱码都是由于中文字符引发的,因此只要不写中文,就不会产生“乱码引起CSS失效”的这种情况

撇开以上两种小技巧,我们在刨下根,就会发现“乱码”通常来自以下两种情况。

一、中文注释引起乱码
CSS注释为:/*某些注释*/
乱码实例:
正常代码:/*三汉字*/
引起的乱码:/*涓夋眽瀛?/
浏览器环境:IE6
HTML:gb2312
CSS:无编码指定,实际解析为utf-8.

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312" />
    <style type="text/css">
    p{/*三汉字*/color:#f00;}
    </style>
</head>
<body>
<p>测试</p>
</body>
</html>

ie7查看源文件。

在ie6以下版本文字颜色没变化。

上例为乱码阻断了CSS注释的结束符,使得后面的CSS内容都在注释范围内,从而导致CSS的失效

防范措施:加强注释
示例:
正常代码:/****三汉字****/
引起的乱码:/****涓夋眽瀛?***/
这种增强版的注释可以防止乱码把注释的最终结束符“变异”,可以在编写CSS时,提前防范。

二、中文字体引起乱码
CSS指定字体:font-family:"中文字体";

乱码实例:
正常代码:font-family:"黑体"
引起的乱码:font-family:"榛戜綋"
浏览器环境:IE6
HTML:gb2312
CSS:无编码指定,实际解析为utf-8

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312" />
    <style type="text/css">
    p{/*三汉字*/color:#f00;font-family:"黑体"}
    </style>
</head>
<body>
<p>测试</p>
</body>
</html>

源文件

上例为乱码使得字体名称变成乱码,导致指定字体失效。这个问题的后果似乎不是很严重,但实际情况中,确实存在一种乱码把后面的引号“变异”的情况,使得后面的CSS都在字体的引号中,从而后面的CSS全部失效。
防范措施:采用字体的别名(所以浏览器都可识别)

示例:
正常代码:font-family:"SimHei" (font-family:"\9ed1\4f53" )
浏览器解析:font-family:"SimHei" (font-family:"黑体",IE6仍为font-family:"\9ed1\4f53" 但字体解析显示为黑体)
使用别名,绕开了使用中文,从而避免乱码

css中文字体(font-family)列表
Windows的一些:
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软雅黑体:Microsoft YaHei

装Office会生出来的一些:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei

补充:
使用楷体_GB2312、仿宋_GB2312后,在 Windows 7/Vista/2008 中可能不再显示为对应的字体。
这是因为 Windows 7/Vista/2008 中有楷体、仿宋,默认情况下没有楷体_GB2312、仿宋_GB2312,字体名称相差“_GB2312”。

-----------------------------------------------------------

中文字体在 CSS 中的写法
针对字体的写法,觉得需要说明一下:

body,button, input, select, textarea {
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}

“\5b8b\4f53″ 就是 “宋体”。用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。

普及点字体知识:
字体的别名
系统中的一个字体是允许有多种别名形式存在的。比如,在 Windows 下,Georgia 也可以用 Georgia MS 来命名,它们其实是同一种字体。宋体的正式名称是 SimSun,而“宋体”只是它的别名。
按照规范,浏览器应该能自动识别字体的别名,并映射到正确的字体文件。比如,font-famliy: SimSun和font-family: "宋体"应该具有等价的效果。可惜,似乎很多浏览器都不能正确执行前一条定义……
因此,考虑浏览器兼容,我们需要用“宋体”,转码成 unicode 形式则可以保证在任何编码下都无问题。

-----------------------------------------------------------

为了方便需要的朋友快速使用,下表中列出了一些常用中文字体的Unicode编码:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
楷体 \6977\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

时间: 2024-10-17 23:34:22

乱码引起的CSS失效原理,解决技巧。的相关文章

CSS失效网页乱码原因兼容问题-手写CSS代码注意什么

我们在写html代码和css 代码应该注意些什么,这节我们讲解大小写与编码问题.(体感音乐) 乱码VS编码前面我们介绍过导致网页乱码.CSS失效等原因一部分是由于自己编写的时候没有注意编码问题,不编码转化问题,常常因为自己写的时候使用一种编码,发现别人比较好的DIV+CSS片段比较好直接就复制过来用,结果别人编码与自己编码不符合从而造成网页在IE中呈现乱码,或CSS失效(CSS声明).解决办法使用软件中编码转化功能进行网页代码转化.如使用Dreamweaver中功能转化编码.-了解语言编码cha

ie6,ie7,ie8 css bug兼容解决记录

ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着

学习日记:关于javaweb filter中过滤了css文件的解决方法

这是搬运以前的笔记. 在用javaweb做项目时,遇到了filter把css文件等过滤了,导致HTML的布局失效,解决方法是再filter中进行判断,当遇到css文件,png,jpg图片等时,放行.代码如下 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletReques

C#下利用封包、拆包原理解决Socket粘包、半包问题(新手篇)

介于网络上充斥着大量的含糊其辞的Socket初级教程,扰乱着新手的学习方向,我来扼要的教一下新手应该怎么合理的处理Socket这个玩意儿. 一般来说,教你C#下Socket编程的老师,很少会教你如何解决Socket粘包.半包问题. 更甚至,某些师德有问题的老师,根本就没跟你说过Socket的粘包.半包问题是什么玩意儿. 直到有一天,你的Socket程序在传输信息时出现了你预期之外的结果(多于的信息.不完整的信息.乱码.Bug等等). 任你喊了一万遍“我擦”,依旧是不知道问题出在哪儿! 好了,不说

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline

DIV+CSS常用网页布局技巧!

以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left sidebar</div>  <div id="content">Main Content</div> CSS Code <style type="text/css"> *{    margin: 0;    paddi

关于jsp乱码问题的产生原因 及 解决方法。

http://blog.csdn.net/caoxiaohong/article/details/1781777 JSP/JDBC MySQL乱码问题JSP的request 默认为ISO8859_1,所以在处理中文的时候,要显示中文的话,必须转成GBK的,如下String str=new String(request.getParameter("name").getBytes("ISO8859-1"),"GBK"); out.println(st

IIS上发布站点后URL重写失效的解决方法

在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左侧中部,点击“添加”a按钮进入“添加/编辑应用程序扩展名映射”窗体.>在“添加/编辑应用程序扩展名映射”窗体中设置:可执行文件-〉选择“C:\WINDOWS\Microsoft.NET\Framework\v4.0.50727\aspnet_isapi.dll”(和.aspx扩展名的可执行文件相同)&g

IE6下fixed失效的解决方法

在网上找了好久,终于找到一种亲测有效的解决方法. <!--[if IE 6]> <script type="text/javascript"> (function($) { jQuery.fn.Fixed = function(options) { var defaults = { x:0, y:0 }; var o = jQuery.extend(defaults, options); var isIe6 = !window.XMLHttpRequest; v