嵌套在 <li> 中的 <i> 文本颜色的 mPDF CSS 类被父级颜色覆盖

Posted 2023-05-07

【中文标题】嵌套在 <li> 中的 <i> 文本颜色的 mPDF CSS 类被父级颜色覆盖

【英文标题】：mPDF CSS class for text color of <i> nested in <li> overridden by parent's color

【发布时间】：2020-01-17 19:54:11

【问题描述】：

相关的 html 看起来像：

    <li class="lineEntry t1" title="Right-Click for Options" style="">
     <span id="job_111095">
        <i class="ic-p-appr"></i> 111095
     </span> Foo/Bar, Some Text </span>
    </li>

...相关的 CSS 看起来像 (file = icomoon's foo.css) ...

/* this is an icomoon icon, that should be green */
.ic-p-appr:before  
  content: "\e905";
  color: #0f8040 !important;

... 和 (file = bar.css) ...

    .t1color:#B92426;
    /* .line-entry never defines a color */

我在 bar.css 之后添加了 !important 并加载了 foo.css 以使图标变为绿色 (#0f8040)，但嵌套在 .t1 类中的图标始终仅在 mpfd 时继承该父级的字体颜色将 HTML 转换为 pdf 文档。 （HTML 中的嵌套图标按预期工作）

当我查看受支持的 CSS 的 mPDF 文档时，我在其中或在 SO 中看不到任何表明发生这种情况的原因。我的 mPDF 是 7，这里是配置：

    $mpdf = new \Mpdf\Mpdf([
        'fontDir' => array_merge($fontDirs, [
            '../vendor/resources/fonts',
        ]),
        'fontdata' => $fontData + [
            'icomoon' => [
                'R' => 'icomoon.ttf',
            ],
        ],
        'format' => 'A4-L',
        'orientation' => 'L',
        'debug' => true,
    ]);

见： enter image description here 感谢您提供有关此问题的帮助。

【参考方案1】：

修正：我发现因为 mPDF ver7 不支持 CSS 伪类：之前，需要用类名独立声明 font-color。因此，对于我的 HTML 输出，这有效， .ic-p-appr:before color: #0f8040 !important; 但我不得不再次声明它，减去 ':before' 以在 PDF 文档中注册该样式。

总结：mPDF7 忽略了在伪类下声明的 CSS 样式属性。