使用::first-letter时首字母错位，因它生成匿名内联框且vertical-align默认为baseline，导致与line-height、字体度量冲突；应设line-height:1、vertical-align:top或float:left来稳定布局。
当使用 ::first-letter 伪元素设置首字母样式时，如果出现行高（line-height）异常、首字母下沉或错位，通常是因为浏览器对 ::first-letter 的渲染规则与普通文本不同——它会生成一个**匿名内联框**，其默认 vertical-align 为 baseline，且继承父级 line-height 的方式特殊，容易和字体大小、行高、字体度量（如 ascent/descent）产生冲突。
明确 ::first-letter 的行高计算逻辑
::first-letter 的 line-height 不作用于自身高度，而是影响其所在行的**整行行高**；同时，它的 font-size 放大后，若未重置 vertical-align，就会按基线对齐，导致视觉上“下沉”或“顶出”。关键点：
- 首字母框是独立的内联盒子，
line-height值仅用于确定该盒在行内的垂直定位空间，不直接撑高自身 - 默认
vertical-align: baseline会让大号首字母的基线强行对齐整行文字基线，造成上方留白过大或下方悬空 - 父容器的
line-height仍主导行框高度，首字母的尺寸变化可能挤压或拉伸该行
推荐组合设置（稳定居中+不破坏行流）
最稳妥的做法是：固定首字母尺寸 + 显式对齐 + 隔离行高影响。示例：
p {
line-height: 1.6; /* 基础行高 */
font-size: 16px;
}
p::first-letter {
font-size: 3em; /* 相对于父 font-size，即 48px */
line-height: 1; /* 避免放大行高，让首字母“紧凑” */
vertical-align: top; /* 或 middle / text-top，避免 baseline 拉偏 */
float: left; /* 可选：脱离文档流，彻底解耦行高影响 */
margin-right: 0.2em;
}说明：
立即学习“前端免费学习笔记（深入）”；
-
line-height: 1是关键，防止首字母自带 line-height 推高整行 -
vertical-align: top让首字母顶部对齐行框顶部，视觉更稳；用middle需配合line-height调整才自然 - 加
float: left是最常用解法——首字母变成块级浮动元素，完全不参与内联流排版，行高由剩余文字决定
遇到字体度量差异（如苹方/思源黑体）怎么办
某些字体（尤其无衬线中文字体）的 ascender/descent 比例特殊，即使设置了 vertical-align: top，首字母仍可能看起来偏高或偏低。此时可微调：
- 用
transform: translateY(-Xpx)手动修正（慎用，影响可访问性） - 改用
vertical-align: text-top或text-bottom，它们对齐的是父元素的 text area 边界，比top更贴合字体实际渲染区域 - 给父
p加padding-top或margin-top预留空间，避免首字母顶到上一行
兼容性与注意事项
::first-letter 在所有现代浏览器中支持良好，但注意：
- 不能应用于
inline元素（如span），只对块级或 table-cell 等生成行框的元素生效 - 若首字符是标点（如 “‘”、““”），部分浏览器可能不触发，建议确保首字符为字母或数字
- 避免在
::first-letter中设置width/height（除非配合float或display: inline-block），否则易引发布局异常
