使用 CSS 修复 mpdf 中 sup 标签上方的额外间距

Question

是否可以调整 mpdf 中的行高、填充或边距？我尝试将下面的代码应用于 mpdf 的 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;
}

<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>

Front end screenshot

mpdf pdf output

Answer 1

根据文档，有一些方法可以实现这一点。选择其中之一，让魔法发生。

CSS 样式表 - 包含在 HTML 文档的标题中或作为 @import()
css-stylesheets

1. html 标签，例如p { font-size:12pt; color:#880000; }
2. 类，例如.stylename { font-size:9pt; }
3. id 例如#style { font-size:9pt; }
4. 内嵌 CSS 样式，例如 <p style="font-family:monospace;">

以及我更喜欢使用的方式。

使用样式表文件。

WriteHTML() 方法采用第二个参数，即 $mode。有关此参数和其他参数的详细信息，请参阅 WriteHTML()。

使用样式表的示例

<?php

$stylesheet = file_get_contents('style.css');

$mpdf->WriteHTML($stylesheet,\Mpdf\HTMLParserMode::HEADER_CSS);
$mpdf->WriteHTML($html,\Mpdf\HTMLParserMode::HTML_BODY);

否则请阅读本文。它也可以帮助你。 Superscript in CSS only