initial-letter在Chrome/Firefox/Android WebView中完全不支持，仅WebKit部分支持；::first-letter+float是唯一跨浏览器稳定方案，需注意line-height、font-size、容器显示模式及HTML结构限制。
initial-letter 在非 WebKit 内核（Chrome/Firefox/Android WebView）中根本不会解析，不是兼容性差，而是浏览器压根不识别该属性——启用它等于主动放弃 80% 以上真实用户。
为什么 initial-letter 在 Chrome/Firefox 里完全不生效
它不是“没写对”，而是浏览器根本不支持。Chrome 119+ 需手动开启 chrome://flags/#enable-experimental-web-platform-features 才能启用；Firefox 至今无任何实现；Android WebView（包括微信、QQ、支付宝内核）完全无响应。线上项目若依赖它，getComputedStyle(p).initialLetter 返回空字符串，DevTools 里连 computed 样式都不会出现。
::first-letter + float 是唯一跨浏览器稳定方案
这不是降级，而是当前唯一被所有主流引擎（iOS Safari、Chrome for Android、X5、WebKit/Blink/Gecko）稳定支持的路径：
-
float: left是触发文字环绕的唯一方式——不加它，首字只是变大，后续文字不会绕排 -
line-height: 0.75必须显式写，且不能带单位；继承父级line-height: 1.6会让放大后的首字撑开整行，第二行直接被顶到下方 -
font-size建议用clamp(2rem, 4vw, 3.5rem)，固定值至少2.5em；2em在多数中文字体下视觉上根本看不出下沉感 - 父容器必须是块级且未设
display: flex或display: grid，否则伪元素静默失效 - HTML 中首字符前不能有换行、空格、注释或内联标签，比如
<p><strong>今</strong>天…</p>里的::first-letter选不到“今”
移动端首字下沉最容易踩的三个坑
小屏设备上，字体加载延迟、系统缩放、WebView 渲染差异会把本就不稳定的 ::first-letter 推向崩溃边缘：
立即学习“前端免费学习笔记（深入）”；
- 首字位置偏移？加
overflow: hidden到父容器上，强制重排并稳定浮动锚点（iOS Safari 尤其需要） - 避免用
transform: translateY()微调垂直位置——它会破坏 baseline 对齐，在双击放大或动态缩放时文字上跳、错行 - 中文以《、【、“等标点开头时，
::first-letter会选中标点而非汉字，结果是引号被放大三倍；需服务端/构建时正则提取首汉字再包裹
真正麻烦的不是怎么写样式，而是怎么让首字在不同字体、不同缩放、不同 WebView 下都稳住位置——::first-letter 的不可控性会随中文字体字怀差异、fallback 字体切换、系统字体加载时机快速上升。
