鼠标悬停显示内容后父元素意外增高的问题排查

• 检查FontAwesome图标的垂直对齐与行高：FontAwesome图标基于字体渲染，默认的vertical-align或line-height可能和span文本的基线不匹配，导致行盒高度被拉高。尝试给图标元素添加vertical-align: middle或top，强制和span对齐。
• 统一容器的行高规则：FontAwesome字体的默认行高可能与网站全局行高冲突，hover后浏览器取了更大的行高值。给锚点元素强制设置line-height: 1或固定数值，覆盖字体自带的行高属性。
• 排查字体度量的影响：部分字体（包括FontAwesome）的ascender/descender（字体上下延伸区域）数值偏大，即使字号小也会占用额外垂直空间。可以尝试给锚点添加font-size-adjust属性，或设置display: inline-block+overflow: hidden来限制容器高度。
• 对比hover前后的盒模型变化：用浏览器开发者工具的元素面板，查看锚点元素在hover前后的content、padding、border、margin数值变化，确认是否有全局样式（比如针对a/span的margin/padding）在span显示后被触发。
• 调整inline元素的显示方式：span为inline元素，和FontAwesome图标混合时可能出现基线对齐问题。尝试将span设为inline-block，或给两者统一设置vertical-align: baseline来规范对齐逻辑。
• 确认FontAwesome字体的优先级：如果使用伪元素实现图标，可能存在font-family优先级冲突，导致图标和span的字体规则相互干扰。给图标元素单独指定font-family: 'Font Awesome 6 Free' !important，确保字体仅作用于图标。
• 尝试替换布局方式：部分浏览器对混合不同字体的inline行盒存在渲染bug，可将锚点设为display: flex，用flex布局强制元素对齐，规避行盒自动计算的问题。

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