initial-letter应直接弃用，因chrome、firefox、android webview根本不解析该属性；唯一跨浏览器方案是::first-letter配合float:left、line-height:0.75和clamp()响应式font-size，并确保html结构纯净、容器为块级且非flex/grid。
别修复，直接弃用 initial-letter——它在 Chrome、Firefox、Android WebView 中压根不解析，不是兼容性问题，是浏览器根本不认这个属性。
为什么 initial-letter 在非 Safari 浏览器里完全不生效
这不是写法错误或漏了 vendor prefix，而是标准实现缺失：initial-letter 目前仅 Safari 16.4+ 原生支持；Chrome 119+ 需手动开启 chrome://flags/#enable-experimental-web-platform-features；Firefox 官方标记为「No support」；Android WebView（含微信、QQ、支付宝）无任何响应。你写的 initial-letter: 3 在这些环境里会被 CSS 解析器直接跳过，getComputedStyle(p).initialLetter 返回空字符串，DevTools 的 computed 样式面板里根本不会出现该属性。
::first-letter + float: left 是唯一跨浏览器稳定方案
这不是降级，是当前唯一被所有主流引擎（WebKit/Blink/Gecko）稳定支持的路径，但必须配齐三要素：
-
float: left：唯一能触发文字环绕的属性；不加它，首字只是变大，后续文字不会绕排 -
line-height: 0.75：必须显式写，且不能带单位；继承父级line-height: 1.6会让放大后的首字撑开整行，第二行直接被顶到下方 -
font-size: clamp(2.5rem, 4vw, 3.5rem)：固定值至少2.5em；2em在多数中文字体下视觉下沉感极弱
父容器必须是块级且未设 display: flex 或 display: grid，否则伪元素静默失效；HTML 中首字符前不能有换行、空格、注释或内联标签（如 <p><strong>今</strong>天…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 里的 ::first-letter 选不到“今”）。
中文段落以标点开头时 ::first-letter 选错字怎么办
这不是 bug，是规范行为：::first-letter 匹配的是 Unicode 字母类（Letter）的第一个字符，而中文引号“、书名号《、括号（等属于 Punctuation 类，部分浏览器会优先选中它们——结果就是标点被放大三倍，正文从第二行开始错位。
- 服务端或构建时用正则
/^[\u4e00-\u9fa5\w]/提取首汉字再包裹，HTML 变成<p><span class="dropcap">中</span>国人民…</p> - 若 CMS 输出不可控，前端 JS 检测首字符是否为标点，动态插入
<span></span>包裹首汉字 - 绝对不要依赖浏览器自动“吞并”标点——Chrome 和 Firefox 行为不一致，Firefox 更容易把全角引号整个吞掉
真正麻烦的不是怎么写样式，而是让首字在不同字体、不同缩放、不同 WebView 下都稳住位置：::first-letter 的不可控性会随中文字体字怀差异、fallback 字体切换、系统字体加载时机快速上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
