CSS initial-letter属性全浏览器失效，求首字母占三行解决方案

哎，我完全懂你的困惑——initial-letter看起来就是为实现首字母下沉（占据多行高度）量身定做的属性，但它的浏览器支持现状确实让人失望！

为什么initial-letter不生效？ #

这个属性目前还处于实验性阶段，主流浏览器的支持非常有限：

• Chrome、Edge需要手动开启「实验性Web平台特性」（在chrome://flags或edge://flags里搜索开启），默认是关闭的；
• Firefox和Internet Explorer完全没有支持；
• Safari的支持也仅局限于部分旧版本，且存在兼容性问题。

所以直接在生产环境里用initial-letter，基本没法让所有用户正常看到效果。

可靠的替代方案（float + margin组合） #

你提到的::first-letter搭配float:left的方案，其实是行业内实现首字母下沉的标准做法，兼容性拉满，效果也能完全达到你的需求。这里给你调整后的完整代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
section{
  background-color:blue; 
  width:600px; 
  margin:auto;
  padding: 1rem; /* 加个内边距，让文字不贴边 */
}
p::first-letter{
  float: left;
  font-size: 3em; /* 字体大小设为正文的3倍，对应占据3行高度 */
  line-height: 1; /* 控制首字母的行高，避免和正文行高冲突 */
  margin-right: 0.5rem; /* 首字母和正文之间留些空隙，更美观 */
  margin-top: 0.1em; /* 微调垂直位置，让首字母和第一行正文对齐更自然 */
  color: #fff; /* 和正文同色，保持风格统一 */
}
p{
  color:white;
  line-height: 1.6; /* 调整正文行高，提升可读性 */
  margin: 0;
}
</style>
</head>
<body>
<header>
  <h1>Entendiendo la propiedad "first-letter" de CSS</h1>
</header>
<section>
  <p>Este texto esta pensado para ver el pseudoelemento ::first-letter que permite en CSS modificar las caracteristicas de la primera letra de un parrafo (normalmente se modifica el tamano).</p>
</section>
</body>
</html>

方案原理说明 #

• float:left让首字母脱离常规文档流，占据段落左侧的空间；
• 放大font-size后，首字母的高度会自然覆盖多行正文；
• 通过margin调整首字母和正文的间距、垂直对齐位置，让整体排版更协调。

如果之后initial-letter的浏览器支持普及了，再切换过去也不迟，但目前这个替代方案是最稳妥的选择。

内容的提问来源于stack exchange，提问作者Israel