Bootstrap 4模态框关闭图标×显示异常，求助修复方案

我之前也碰到过一模一样的情况——明明在页面头部设置了UTF-8编码，模态框的关闭叉号还是显示成奇怪的特殊字符！给你几个亲测有效的修复方案：

1. 确保使用Bootstrap标准的关闭按钮结构 #

先确认你的关闭按钮代码是Bootstrap官方推荐的完整结构，虽然你已经用了×，但完整结构能避免一些潜在的解析问题：

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

2. 检查HTML文件的实际编码 #

很多时候问题出在文件本身的编码，而不是meta标签。比如你在编辑器里把文件保存成了GBK或其他编码，即使meta设了UTF-8也没用：

• 用VS Code打开文件，点击右下角的编码标识（比如"GBK"）
• 选择「通过编码保存」，然后选「UTF-8」
• 保存后刷新页面再测试

3. 替换HTML实体为十进制写法 #

×是HTML的十六进制实体，有时候某些环境下解析会出问题，换成十进制实体×试试：

<span aria-hidden="true">&#215;</span>

4. 验证服务器响应头的编码设置 #

如果上面的方法都没用，检查服务器返回的响应头是否正确设置了UTF-8：

• 打开浏览器开发者工具（F12），切换到「网络」面板
• 刷新页面，找到当前页面的请求，查看「响应头」里的Content-Type字段，确认它是text/html; charset=utf-8
• 如果不是，需要在服务器配置里修改：
  • Apache：在.htaccess文件中添加

    AddDefaultCharset UTF-8
    

  • Nginx：在server配置块中添加

    charset utf-8;
    

一般前两个方法就能解决大部分问题，你可以先从文件编码开始排查！

内容的提问来源于stack exchange，提问作者sk2