Firefox浏览器中<p>标签内<strong>标签无法加粗文本问题咨询

问题原因 #

这是Firefox浏览器的默认样式兼容问题，已有大量开发者反馈过同类情况：部分版本的Firefox针对东亚字体（中文、日文、韩文）的默认样式表中，<p> 标签下的 <strong> 元素继承的字重优先级异常，导致没有正确触发粗体渲染，而 <li> 下的样式规则不受该问题影响，因此表现正常。Chrome、Safari的默认样式表没有这套特殊规则，表现符合预期。

解决方案合理性 #

给 <strong> 全局设置 font-weight: bold; 是完全符合规范的解决方案，属于业界通用的CSS重置（CSS Reset）操作范畴：

• <strong> 标签的原生语义为重要内容强调，默认渲染约定就是粗体，手动设置字重不会破坏标签本身的语义
• 该规则可以抹平不同浏览器的默认样式差异，保证所有场景下 <strong> 的表现符合预期，不存在兼容性问题

建议可以在项目的全局CSS重置代码里统一加上这条规则，避免后续再出现同类问题：

strong {
  font-weight: bold;
}

测试验证 #

你提供的测试代码确实可以复现该问题：

<ul>
  <li>Normal</li>
  <li><strong>Strong</strong></li>
  <li>
    <p><strong>Strong</strong></p>
  </li>
</ul>

<p><strong>Strong</strong></p>

如果添加上述CSS规则后问题仍然存在，可排查是否有其他自定义样式覆盖了strong的字重，或者当前Firefox安装的样式篡改类扩展、自定义字体配置导致的异常。

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