使用CSS调整mpdf中sup标签样式、修复其上方额外间距问题

mPDF支持调整行高、内边距和外边距，你遇到的全量样式不生效问题，核心原因是mPDF对CSS的支持和浏览器标准存在差异：默认<sup>属于行内元素，mPDF对行内元素设置display: inline-block、上下margin/padding、上下border、行高的识别度极低，所以才会出现所有属性都不生效的情况。

你提交的原始代码参考 #

CSS代码 #

sup{
  line-height: .6em;
    top: -10px; 
    font-size: 0.63em;
    vertical-align: super;   
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: solid 1px #000000;
    display: inline-block;
    background: yellow;
}

HTML代码 #

<p>Phasellus nec lectus in risus consequat hendrerit non eu elit. Fusce imperdiet, ante sed maximus 6<sup>th</sup>, nulla augue ultrices nibh, vel ornare ligula dolor sed est.<p>

可行修复方案 #

• 方案1：修改CSS适配mPDF的支持规则
  无需强行给<sup>设置display: inline-block，直接使用mPDF支持的行内元素属性调整样式即可，参考修改后的CSS：

  sup {
      font-size: 0.63em;
      vertical-align: super;
      position: relative;
      top: -0.5em;
      background: yellow;
      border-bottom: 1px solid #000;
      /* 上下边距建议通过父级p标签的行高间接调整，左右内边距可直接设置 */
      padding: 0 2px;
  }
  /* 行高直接设置在块级父元素上，生效优先级更高 */
  p {
      line-height: 1.6;
  }
  

• 方案2：包裹行内块容器实现完整盒模型效果
  如果你需要完整的上下边距、边框效果，可以将<sup>包裹在一个行内块的<span>容器内，mPDF对父级行内块的样式支持度远高于直接给行内元素设置行内块属性，示例修改后的HTML：

  <p>Phasellus nec lectus in risus consequat hendrerit non eu elit. Fusce imperdiet, ante sed maximus 6<span class="sup-wrapper"><sup>th</sup></span>, nulla augue ultrices nibh, vel ornare ligula dolor sed est.</p>
  

  对应CSS：

  .sup-wrapper {
      display: inline-block;
      padding-bottom: 20px;
      margin-bottom: 10px;
      border-bottom: solid 1px #000000;
      background: yellow;
  }
  .sup-wrapper sup {
      font-size: 0.63em;
      vertical-align: super;
      position: relative;
      top: -0.5em;
  }
  

额外注意事项 #

• mPDF对em单位的动态计算支持有限，涉及位置、边距的属性尽量使用px或百分比单位，兼容性更好
• 样式尽量直接写在HTML的<style>标签内，使用外部CSS时要确认传入mPDF的是绝对路径，避免出现样式加载失败的问题
• 行高、块级边距类属性统一设置在<p>这类块级父元素上，不要直接设置在行内子元素上，生效概率更高

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