h1显示得比h2小并非浏览器bug，而是css样式覆盖了默认行为：浏览器为h1–h6设定了内置em值（如h1:2em、h2:1.5em），但若全局重置或父元素font-size异常，或更具体选择器显式设定了更小值，就会导致h1视觉上小于h2。

为什么 h1 显示得比 h2 小？

这不是浏览器 bug，而是 CSS 样式覆盖了默认行为。所有现代浏览器对 h1 到 h6 都有内置默认样式（比如 h1 默认是 2em，h2 是 1.5em），但只要页面中任何一条 CSS 规则设置了更具体的字体大小，就可能让 h1 反而变小。

h1 被全局重置或继承了异常 font-size 的常见原因

以下情况最容易导致视觉上 h1 h2：

• 使用了第三方 CSS 框架（如 Bootstrap 5+、Tailwind 的 preflight），它们会重置所有标题的 font-size，有时统一设为 1rem 或更低
• body 或父容器设置了极小的 font-size（例如 font-size: 0.8rem），而 h1 用了 em 单位（如 font-size: 1.2em），h2 却用了 rem 或固定值（如 font-size: 1.5rem）
• 写了类似 h1 { font-size: 0.9em; } 这种明显反直觉的规则，可能藏在媒体查询里（比如只在 max-width: 768px 下生效）
• 通过 @import 引入的外部样式表晚于你自己的 CSS 加载，意外覆盖了你的标题设置

如何快速定位并验证问题源头

打开浏览器开发者工具（F12），选中那个“变小的 h1”，看右侧 Computed 面板里的 font-size 值和来源路径。重点关注：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 是否显示为 0.875rem 或 14px 这类明显偏小的值
• 对应样式是否来自 normalize.css、reset.css 或某个 UI 库的 CSS 文件
• 检查 h1 和 h2 的 font-size 是否使用了不同单位（em vs rem vs px），这会导致继承链差异
• 右键点击该 h1 元素 → “Break on” → “attribute modifications”，然后刷新页面，看是否有 JS 动态修改了 style.fontsize

修复时别忽略的细节

直接写 h1 { font-size: 2rem !important; } 能见效，但容易埋坑：

• 如果项目用的是 CSS-in-JS 或 Shadow DOM，!important 可能不生效，得改作用域或提升 specificity（比如用 body h1）
• 移动端适配时，很多框架会对 h1 做响应式缩放（如 @media (max-width: 480px) { h1 { font-size: 1.4rem; } }），要同步检查断点逻辑
• h1 字号变小常伴随行高、上下 margin 异常，建议一并检查 line-height 和 margin 是否也被重置过

真正稳定的解法是找到那个“最先声明且生效”的标题样式规则，要么删掉它，要么显式覆盖它——而不是靠堆叠 !important 或盲目加选择器权重。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！