CSS !important 不适用于 mpdf答案

【问题标题】：CSS !important doesn't work with mpdfCSS !important 不适用于 mpdf
【发布时间】：2015-06-23 03:36:29
【问题描述】：

我使用 mPDF 将 html 文件转换为 pdf 文件，几乎可以，但 !important 属性不起作用。代码如下：

CSS：

td .style1 {border-left:2px #000000 solid !important;}
td .style2 {border-left:none;}

HTML：

<table>
    <tr>
        <td class="style1 style2">Something here</td>
    </tr>
</table>

结果是td标签的左边框消失。我认为原因是style2 波纹管style1 而mPDF 不知道!important 属性。我该如何解决这个问题？

注意：html和css代码是自动生成的，所以我不能删除style2，因为css类名每次生成都可以改。

注意2：在mPDF生成的pdf文件中边框消失了。浏览器中的 html 边框很好。

【问题讨论】：

标签： html css mpdf

【解决方案1】：

你不能有两个相同类型的规则请求两个不同的东西。因此，如果您无法删除样式 2，接下来唯一合乎逻辑的做法是在生成时创建这样的内联样式：

<table>
   <tr>
      <td class="style1 style2" style="border-left:2px #00000 solid !important;">Something here</td>
   </tr>
</table>

这将有效地完全覆盖样式表并使用您在此处告诉它使用的内容。

【讨论】：

【解决方案2】：

只有你的代码有问题，颜色代码在样式1中缺少一个零（0），休息很好，所以样式1会起作用。

改变

td .style1 {border-left:2px #00000 solid !important;}

到

td .style1 {border-left:2px #000000 solid !important;}

谢谢

【讨论】：

【解决方案3】：

你的 CSS 应该是这样的

td .style1 {border-left:2px #000000 solid !important;}
td .style2 {border-left:none;}

或

 td .style1 {border-left:2px #000 solid !important;}
    td .style2 {border-left:none;}

颜色代码应该是六位数或三位数。请阅读一些关于颜色代码的文章

【讨论】：

【解决方案4】：

尝试为此组合添加更具体的样式：

td.style1, td.style1.style2  {border-left:2px #000000 solid;}

【讨论】：

【解决方案5】：

mPDF 在使用多个类时存在一些问题，例如 class="style1 style2"。如果可能，将其减少到一个。对于我的项目，我经常使用内联 css 来解决这个问题：

<style>
...
</style>

在生成 pdf 之前，将其与 html 标头中的修复一起注入。第二个问题是 mPDF 在标签/样式定义列表方面存在问题：

td.style1, td.style1.style2 ...

别这样。

另一种方法是替换多个类。如果您无法更改您的 html 代码。

$html = str_replace('class="style1 style2"', 'class="style1"', $html);

或换一个：

$html = str_replace('class="style1 style2"', 'class="style3"', $html);

【讨论】：