UTF8编码情况下，网页样式未生效问题

该问题我在09年的时候已经遇到，最近有周边朋友又遇到该问题，在此解释。

环境是PHP+MYSQL。之前在写网页代码时常有朋友为乱码问题头疼，笔者也深受其困。后来琢磨了一下，找到了解决之道。

网页中涉及到多个地方的编码问题：

1. 数据库编码

    顾名思义，数据库中存放数据时采用的编码。这个编码应该和网页显示的内容所采用的编码一致，否则会乱。笔者采用的方法是，创建数据库和数据表时，指定使用UTF8编码。接下来，存入和取出时都指定使用UTF8编码。可在执行SQL语句前执行：mysql_query('set names "utf8"');

2. 网页文件本身的编码

    Windows记事本等编辑器在保存时都可以选择编码方式，例如，记事本可以选择ANSI,UNICODE等。专业的编辑软件UltraEdit还要以在多种编码间转换，DreamWeaver和Zend也都有设置编码的功能。从网上搜集的资料显示，UTF8编码方式在文件头可以设置BOM，也可以不设置（笔者也没深入研究）。可能是这个原因，在UltraEdit设置UTF8编码且能正常显示中文后，再在Zend中打开，有时还是会出现乱码，搞得一头雾水，不知道内部到底做了什么。根据我的经验，创建好文件后，只要用DreamWeaver打开，并使用Ctrl-J快捷键打开编码设置对话框，并设置为UTF8，且不包括Unicode签名（BOM），保存后，不管在UltraEdit还是Zend中都会显示正常。

3. 客户端浏览网页的默认编码

     这个问题大家都比较熟悉。在HTML代码中有一段形如：的代码，设置好后客户端打开时会默认采用该编码打开，否则要在浏览器上手动改变编码才能正常显示。

 

以上3种编码设置成一致后，就不会出现乱码情况。

 

近日帮一位朋友做了几个小页面，在我的服务器上显示均正常，但移植后我交待他修改了几个参数，结果修改参数后样式出现混乱的情况。打开源代码复制后粘贴在记事本中，光标默认在左上角。按向右键一次，发现光标并未右移，按键多次后才开始右移。实际上这是因为在可视字符前面存在多个不可视的字符，原因可能是UTF8编码下的BOM，或者在修改源代码保存时存为了其他编码。这导致了CSS样式没有生效。根据文件最后修改时间，笔者将这些文件重新使用DreamWeaver修改编码为UTF8，且不包括Unicode签名后，问题消失。

 

以上经验，在此与大家分享。最近杂事多，排版较粗糙，日后再改，见谅。