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

Posted 2023-05-07

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

【英文标题】：Fix extra spacing above sup tag in mpdf with CSS

【发布时间】：2021-10-20 14:57:31

【问题描述】：

是否可以调整 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

【参考方案1】：

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

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

html 标签，例如p font-size:12pt; color:#880000; 类，例如.stylename font-size:9pt; id 例如#style font-size:9pt; 内嵌 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

【讨论】：

我不确定您是否理解我遇到的问题。我可以使用带有 mpdf 的样式表文件，并且可以将 css 应用于许多标签，如 、

您好@stackDru，我想我非常了解任务描述的内容。您只是尝试设置 sup 标记的样式。如果上述选项不适合您，您是否尝试过阅读上面的上标链接？在那里，我相信你可以对html sup 标签的功能和局限性有一个更好的了解。 :)

你有在 mpdf 中工作的例子吗？甚至没有为我应用背景颜色。我不明白你说的解决方案。如果您正在使用带有 css 样式表的 mpdf，您可以尝试应用我发送到 ^{标记的 css 代码，看看它是如何为您工作的，并让我看一下它的屏幕截图吗？}

我不知道你是如何在你的机器上安装库的，我不知道你的设置。所以我能给你的最好建议是，从这里开始。一步一步，先深呼吸。 mpdf.github.io/installation-setup/installation-v7-x.html

花两三天时间阅读文档并进行各种测试。从第三天起，您就成为了 mpdf 库的大师。 :)