initial-letter仅Safari 16.4+支持，Chrome/Firefox未实现；可靠方案是::first-letter+float，需作用于块级元素、清除首标点、显式设置line-height与overflow:hidden。
为什么initial-letter在Chrome/Firefox里不生效
它根本不是“失效”，而是压根没实现：initial-letter目前仅 Safari 16.4+（macOS/iOS）完整支持，Chrome 和 Firefox 官方明确标记为「No support」（截至2026年4月）。你写的initial-letter: 3在这些浏览器里会被直接忽略，连 fallback 都不会触发——CSS 解析器扫到不认识的属性就跳过。
::first-letter + float 是当前唯一可靠方案
别试图兼容initial-letter，直接用::first-letter配合float: left，这是所有现代浏览器（Chrome 50+、Firefox 60+、Edge 79+、Safari 9+）都稳定支持的路径。关键不是“能不能用”，而是怎么调才不出错：
-
::first-letter必须作用于块级元素（p、div等），span或inline容器上写无效 - 首字符前不能有空格、换行、HTML 注释，也不能被其他标签包裹（例如
<p><em>这</em>是一段…</p>会失效） -
font-size建议用clamp(2.5rem, 4vw, 3.5rem)，避免小屏溢出；line-height必须显式设为0.7–0.85，继承值会导致第二行被顶高 - 父
p加overflow: hidden清除浮动，比clear: both更干净，也避免额外 DOM 节点
中文段落以标点开头时::first-letter选错字怎么办
这不是 bug，是规范行为：::first-letter匹配的是 Unicode 字母类（Letter）的第一个字符，而中文引号“、书名号《、括号（等属于 Punctuation 类，部分浏览器仍会选中它们——结果就是标点被放大，正文从第二行开始错位。
立即学习“前端免费学习笔记（深入）”；
- 上线前必须检查 CMS 或用户输入的真实段首内容，不能只测“你好”这种理想 case
- 纯 CSS 无法跳过标点选第二个汉字，硬写
::first-letter + ::nth-letter(2)不存在 - 稳妥解法：服务端或 JS 正则预处理，用
/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/匹配开头标点并移除 - 临时降级：对疑似标点开头的段落，统一加
text-indent: 1em，视觉上缓解错位感
需要下沉两个字时别硬套::first-letter
::first-letter永远只匹配一个字符，中文双字词（如“我们”“这个”）想一起下沉，必须手动包裹：
- HTML 写成
<p><span class="dropcap">我们</span>今天开始…</p> - CSS 中
.dropcap设float: left; font-size: 2.8em; line-height: 0.8; margin-right: 0.2em; - 若两字高度不齐（常见于中文字体），给第二字加
margin-top: -0.15em微调，不要动vertical-align——它在浮动上下文中无效 - 父
p仍需overflow: hidden，否则浮动脱离文档流后高度塌陷，后续段落会上移覆盖
真正容易被忽略的是 line-height 和 font-size 的耦合关系：放大字号后，如果不同步压低line-height，首字会像一块高砖立在段首，右侧文字只能从它“头顶”开始环绕——这不是布局失败，是渲染逻辑本就如此。
