Bootstrap 5的navbar-light类与自定义字体在Edge浏览器不生效问题

• 首先修正viewport标签语法错误
  你的代码里viewport属性存在笔误：content="width=device=width, initial-scale=1, shrink-to-fit=no" 中device=width应该修改为device-width，正确写法如下：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Chrome对这类语法错误容错率更高，而Edge会因为该错误导致页面渲染规则异常，进而出现样式不生效的问题。

• 确认Bootstrap文件完整性
  检查你引入的css/bootstrap.css、js/bootstrap.bundle.js是否为官方完整未修改的Bootstrap 5版本，文件路径是否正确，若本地文件加载失败、损坏，都会导致样式类不生效。

• 检查Edge兼容模式配置
  Bootstrap 5不支持IE内核，若你的站点被Edge默认启用了IE兼容模式，会导致大量样式失效。可以打开Edge设置→默认浏览器，查看「Internet Explorer 模式页面」列表，若你的站点在列表内直接移除即可。

• 排查样式优先级冲突
  检查你自定义的css/styles.css文件中是否存在覆盖.navbar-light、.bg-light的样式规则，Edge的CSS优先级计算逻辑和Chrome存在细微差异，可能出现Chrome未触发覆盖、Edge触发的情况。可以临时在head标签内加入以下测试代码，若样式恢复生效即可确认是优先级冲突问题：

<style>
.bg-light {
  background-color: #f8f9fa !important;
}
.navbar-light .nav-link {
  color: rgba(0, 0, 0, 0.55) !important;
}
</style>

确认冲突后调整自定义CSS的选择器优先级即可，无需长期保留!important声明。

• 解决webfont失效问题

  • 检查服务器字体文件的MIME类型配置：Edge对静态资源MIME类型校验比Chrome严格，确保woff、woff2等字体文件的响应头MIME类型为font/woff、font/woff2，类型错误会导致Edge拒绝加载字体，回退到系统默认字体。
  • 检查@font-face规则：确认你styles.css中定义的字体路径、格式声明正确，所有加载的字体格式都兼容当前Edge版本。

• 清除Edge缓存测试
  Edge的静态资源缓存策略更保守，按Ctrl+Shift+Delete清除浏览器缓存、Cookie后重新加载页面，排除旧的错误缓存文件导致的异常。

内容的提问来源于stack exchange，提问作者luan-peixoto-23