::first-letter不生效的主因是宿主元素非块级或含非内联内容；中文首字下沉需font-size与无单位line-height协同调整；Flex/Grid容器中该伪元素失效属规范行为；移动端需防字体缩放干扰。
伪元素::first-letter不生效的常见原因
直接写::first-letter却看不到首字下沉？大概率是它被浏览器自动忽略——这个伪元素对宿主元素有硬性要求：必须是块级容器，且内容得是纯文本或内联子元素。如果父元素里混了<div>、<code><span></span>甚至空格换行，首字就“找不到家”。
常见错误现象：::first-letter样式写了但毫无反应；开发者工具里能看到规则，却显示“computed”值为空。
- 确保目标元素是
<p></p>、<h3></h3>这类天然块级标签，或显式设display: block - 避免在首字符前加空格、换行、注释或
<!-- -->；HTML里别写成<p>\n 文本...</p> - 不要用
float或position: absolute去“强行拉出”首字——它只作用于文本流中的第一个字母/汉字/标点（Unicode L/N类字符）
中文首字下沉时font-size和line-height怎么配比
英文常用font-size: 3em; line-height: 1;就能压住行高，但中文不行——汉字字形方正、默认行距大，光调大字号会让后续文字上移甚至重叠。
关键在line-height要配合font-size做负向补偿，且必须用无单位数值（如0.8），否则会继承计算后绝对高度，破坏多行排版。
立即学习“前端免费学习笔记（深入）”；
- 推荐起手式：
font-size: 2.8em; line-height: 0.75;（适用于16px基础字号） - 若首字被截断，不是
height问题，而是line-height太小导致行框压缩；试着微调到0.78或0.82 - 避免用
margin-top或transform: translateY()位移首字——会脱离文本流，影响后续段落对齐
::first-letter在Flex/Grid容器里为什么完全失效
因为::first-letter本质上依赖文本流渲染机制，而display: flex或display: grid会让子元素变成“格式化上下文根”，直接切断伪元素对内部文本的访问路径。
这不是bug，是规范行为。哪怕你把<p></p>塞进<div style="display: flex">里，它的<code>::first-letter也会静默失效。
- 解决办法只有两个：要么把需要首字下沉的文本移到Flex/Grid外部，要么放弃
::first-letter改用<span class="drop-cap">文</span>本...手动包裹 - 如果必须用伪元素且布局不能动，可尝试给父容器加
display: contents（注意兼容性：IE全不支持，Safari 15.4+才稳定） - 切勿试图用
flex-direction: column+align-items: flex-start“模拟”块级流——无效
移动端适配时::first-letter的字体缩放陷阱
iOS Safari 和部分安卓WebView对::first-letter的font-size会做额外缩放，尤其当页面启用text-size-adjust: auto（默认值）时，用户双指放大后首字可能突然撑满屏幕。
这不是CSS没写对，是浏览器主动干预文本可读性。但首字下沉本就是装饰性效果，不该参与用户缩放逻辑。
- 强制禁用缩放：
text-size-adjust: none;加在html或首字容器上（注意：会影响整个页面字体缩放体验） - 更稳妥的做法：用
@media (max-width: 768px)降低font-size倍数，比如桌面用3em，移动端改2.2em - 别依赖
vw单位做首字大小——视口宽度变化时，它和正文字号比例会失衡，导致下沉错位
真正麻烦的是混合中英文场景：一个::first-letter遇到“Hello世界”，到底选哪个字符？浏览器按Unicode顺序取第一个L类字符，所以是“H”；但你想沉“世”，就得手动拆出来——伪元素没那么聪明。
