p::first-letter设大字号后行高错乱，因其默认为行内元素，放大字号会拉高行框高度而父级line-height未同步调整；解法为float:left脱离文档流或display:inline-block+vertical-align:top配合margin-top微调；中文失效主因是Unicode边界识别与字体渲染差异。
p::first-letter 能直接选中段落首字符，但直接设 font-size 很容易把整行“顶高”，后续文字基线错乱、行距崩坏——这不是样式没生效，是盒模型没控住。
为什么 p::first-letter 设大字号后行高乱了？
因为 ::first-letter 默认是行内元素，font-size 增大会拉高行框（line box）高度，而父级 line-height 是按原始字号算的，结果就是整行被撑开、上下文间距失衡。
关键不是“要不要放大”，而是“怎么让它不干扰其他文字”。核心解法只有两个方向：
- 用
float: left让首字母脱离文档流，再配line-height: 1锁定自身行高 - 改用
display: inline-block+vertical-align: top，但得手动调margin-top补偿下沉（中文尤其明显）
p::first-letter 中文首字失效的三个真实原因
不是浏览器 bug，是 Unicode 和标点边界惹的祸：
立即学习“前端免费学习笔记（深入）”；
- 开头有空格、换行符、全角标点（如《、【、「）时，
::first-letter会跳过它们，找第一个“字母类”字符——中文汉字常被漏掉 - HTML 里写了
<br>
在段首，伪元素照样认不出来 - 某些字体对 CJK 字符的 glyph 渲染不触发标准首字母逻辑，尤其在 Safari 和旧版 Chrome 中更常见
实操建议：确保段落 HTML 开头就是汉字，删掉所有不可见字符；若仍不行，退一步用 <span class="dropcap">第</span>一章... 手动包裹。
float vs inline-block：两种写法的实际差异
用 float: left 最省事，但要注意三点：
- 必须加
margin-right（比如0.1em），否则紧贴后续文字，视觉粘连 - 父
p最好设overflow: hidden或触发 BFC，避免浮动溢出影响后续段落布局 - 如果段落里还有
em、strong等内联元素，浮动首字可能和它们错位，需统一line-height基准
用 display: inline-block 更可控，但得面对对齐细节：
-
vertical-align: top只是对齐容器顶部，汉字本身有下沉，通常要加margin-top: -0.2em往上提 - 不能依赖
line-height自动居中，得靠padding或margin手动微调上下留白 - 响应式缩放时，
em值比px更稳，但margin-top的负值得同步测试不同字号下的表现
真正难的不是写出来，是让首字在各种字体、各种字号、各种行宽下都“站得正、不挤、不下沉”。多试两套字体，再在 iOS 和 Android WebView 里点开看一眼，基本就知道有没有坑了。
