ie8及更早版本仅支持:first-letter单冒号语法，且对中文首字识别不稳定；safari≤16.4对中文::first-letter基本不生效，应优先用initial-letter并降级；chrome与firefox标点吞并行为不一致，需预处理html确保首字符为汉字；ios 15.4前webview不支持initial-letter，须真机测试并视作增强体验。
IE8 及更早版本根本不认 ::first-letter 语法
双冒号写法 ::first-letter 在 IE8 及以下完全无效，必须降级为单冒号 :first-letter。但即便如此，IE6–IE8 对首字符的识别逻辑也极不稳定：遇到全角空格、引号、破折号时容易跳过首汉字；若父元素 font-family 缺失或继承链断裂，伪元素可能直接不渲染。
实际建议：
- 用
@supports或 JS 检测不现实——IE8 不支持@supports，也无法执行现代检测逻辑 - 真要兼容 IE8，只能统一用
:first-letter，且确保 HTML 开头是干净汉字，禁用所有前导标点与不可见字符 - 避免在 IE8 环境下依赖
float+line-height组合做下沉——IE6/7 中float容易引发父容器塌陷，需额外触发 hasLayout（如加zoom: 1）
Safari ≤16.4 对中文 ::first-letter 基本不生效
Safari 在 16.4 及更早版本中，对中文段落的 ::first-letter 渲染支持极差：要么完全不显示，要么尺寸异常小、位置错乱，且不响应 vertical-align 和 margin。这不是字体问题，而是引擎层未正确提取 Unicode 中文首字形。
可行解法：
- 优先启用
initial-letter: 3 2（现代标准），Safari 16.5+ 已完整支持，且行为比::first-letter更可控 - 用
CSS.supports('initial-letter', '3')检测，不支持时再 fallback 到::first-letter样式 - 绝对不要在 Safari 旧版里尝试用
display: block强制布局——这会让::first-letter彻底失效
Firefox 和 Chrome 的“标点吞并”行为不一致
规范允许 ::first-letter 匹配“首个字母前的标点”，但各浏览器实现不同：Chrome 通常只吞并英文引号（"Hello → " 被包含）、Firefox 却可能把中文全角引号（“你好）整个吞掉，导致真正想样式化的「你」字被跳过。
稳定做法：
- 服务端或前端预处理内容，用正则
/^[^\u4e00-\u9fa5\u3400-\u4dbf\uf900-\ufaff]+/剥离开头非汉字字符 - 避免依赖浏览器自动吞并，HTML 结构必须以汉字直启：
<p>中华人民共和国...</p>，而非<p>“中华人民共和国...</p> - 若 CMS 输出不可控，宁可用 JS 提取首汉字并包裹
<span class="first-char"></span>，也不赌伪元素的标点识别
移动端 WebView 的隐藏陷阱：iOS 15.4 之前不支持 initial-letter
iOS 自带 WebView（包括微信、钉钉内嵌页）在 iOS 15.4 之前完全不支持 initial-letter，而 ::first-letter 对中文的支持又和 Safari 16.4 一样靠不住。这意味着纯 CSS 方案在大量真实用户场景中会静默失败。
关键提醒：
- 不要只测 Safari 桌面版，必须用真机或 BrowserStack 测主流 App 内 WebView
- 若项目必须覆盖 iOS 15.3 及更早，
::first-letter是唯一选择，但务必配合display: inline-block+vertical-align: bottom+ 显式line-height，否则视觉飘移极严重 - 最保险的底线：把首字下沉当作增强体验，而非功能必需——内容可读性不能依赖它
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
