浏览器乱码问题及解决方案

分析浏览器显示乱码的常见原因和对应的解决方法

问题

浏览器打开网页时出现中文乱码，无法正常显示内容。

编码声明与实际编码不一致

网页在 <meta> 标签中声明使用 GBK 编码，但文件实际保存为 UTF-8 编码（或相反），导致浏览器按错误的编码方式解析内容。

<!-- 声明为 GBK，但文件实际是 UTF-8 -->
<meta charset="gbk">

数据库编码与页面编码不匹配

HTML 页面使用 GBK 编码，但从数据库读取的数据是 UTF-8 编码，两者混用导致显示异常。

浏览器无法自动识别编码

网页未正确声明编码格式，浏览器自动检测失败，使用了错误的编码方式渲染页面。

统一编码格式

使用编辑器将文件保存为与声明一致的编码格式，推荐统一使用 UTF-8：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  <!-- 内容 -->
</body>
</html>

数据库查询时转码

在程序中读取数据库内容后，转换为页面所需的编码格式：

// Node.js 示例
const iconv = require('iconv-lite');

// 将 UTF-8 数据转为 GBK
const gbkData = iconv.encode(utf8Data, 'gbk');

手动切换浏览器编码

临时解决方案：在浏览器菜单中手动选择正确的编码格式（Chrome: 设置 → 更多工具 → 编码）。