使用:first-letter伪元素实现跨浏览器首字下沉的兼容问题求助

我完全懂你的困扰——Edge和IE这类旧浏览器在::first-letter的渲染上确实有不少奇怪的坑，尤其是垂直位置的偏移问题，偏偏很多企业客户还在依赖这些浏览器。咱们来调整一下你的CSS代码，用纯CSS解决这个兼容性问题：

修改后的代码（SCSS） #

// 跨浏览器兼容的首字下沉
p {
  white-space: pre-wrap;
  line-height: 1.6; // 给段落设置基础行高，统一文本排版基准
  &:first-of-type {
    &:first-letter {
      float: left;
      font-size: 130px;
      line-height: 1; // 重置首字母行高，避免旧浏览器计算偏差
      margin-top: 0.1em; // 用margin替代padding，渲染更稳定
      margin-right: 10px;
      margin-bottom: 0.2em;
      vertical-align: baseline; // 强制对齐基线，修复Edge/IE位置偏移
    }
  }
}

关键调整说明 #

• 替换padding为margin：旧浏览器对浮动元素的内边距计算容易出现不一致，改用外边距能让首字母的垂直位置在各浏览器里更统一。
• 重置首字母line-height：原来固定的65px行高和130px大字体组合，在Edge/IE里会导致垂直对齐混乱，设置为1后浏览器会基于字体本身的比例计算行高，更准确。
• 添加段落基础line-height：确保段落文本的行高基准一致，避免首字母浮动后周围文本的排版错乱。
• 强制vertical-align: baseline：直接告诉Edge和IE将首字母对齐到文本基线，从根源上修正位置偏移问题。

备选方案（若仍有偏差） #

如果上述调整后还有细微位置差异，可以尝试给::first-letter添加display: inline-block;，部分旧浏览器需要这个声明来稳定浮动元素的渲染：

&:first-letter {
  // 保留其他样式...
  display: inline-block;
}

另外你提到用jQuery包裹span的方案，其实只要调整样式参数（比如换成上面的margin和line-height设置），也能解决问题——之前的问题大概率是样式参数本身不兼容旧浏览器，而不是包裹span的方式不对。

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