initial-letter在Chrome/Firefox中不生效，是因为浏览器尚未原生实现该属性：Chrome 119+需手动开启实验标志才支持，Firefox至今完全不支持，Android WebView及旧版Safari亦无实现。
initial-letter 为什么在 Chrome/Firefox 里完全不生效
它不是“没写对”，而是浏览器压根不识别这个属性。Chrome 119+ 需手动开启 chrome://flags/#enable-experimental-web-platform-features 才能启用，Firefox 至今无任何实现，Android WebView 和旧版 Safari（initial-letter: 3 等于对 80% 用户无效。
::first-letter + float 是当前唯一跨浏览器可靠方案
真正在意首字下沉是否“看得见、排得正、不崩”，必须用 ::first-letter 配合 float: left。这不是退而求其次，而是目前唯一被所有主流引擎稳定支持的路径。
-
float: left是触发文字环绕的唯一方式——不加它，首字只是变大，后续文字不会绕排 -
line-height: 0.75必须显式写，且不能带单位；继承父级行高（如 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 推向崩溃边缘。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 别用像素单位设
margin-right或font-size——用户调大系统字体时，间隙会错位甚至导致换行异常 - 首字位置偏移？加
overflow: hidden到父<p>上，强制重排并稳定浮动锚点（iOS Safari 尤其需要） - 避免用
transform: translateY()微调垂直位置——它会破坏 baseline 对齐，在双击放大或动态缩放时文字上跳、错行 - 中文以《、【、“等标点开头时，
::first-letter会选中标点而非汉字，结果是引号被放大三倍；需服务端/构建时正则提取首汉字再包裹
为什么你写的 ::first-letter 样式在 DevTools 里根本看不到
它不是被覆盖了，而是浏览器直接忽略——因为环境不合规时，该伪元素根本不生成计算样式。
立即学习“前端免费学习笔记（深入）”；
- 父元素用了
display: flex或display: grid：文本流被切断，伪元素不触发 - 首字符前有 HTML 注释或零宽字符：
<p><!-- 注释 -->今天…</p> - 段落以全角中文标点起始：伪元素选中的是《，不是后面的汉字
- 写了
text-transform: uppercase后又想单独控制原始字符样式：伪元素作用的是转换后的字符，不是 DOM 中的原始文本
真正让首字“沉下去”的从来不是单个属性，而是 float: left、line-height: 0.75、font-size 三者协同的结果；漏掉任何一个，就只是“变大”，不是“下沉”。
