在 mPDF 上呈现 CSS 的问题 - PHP

Posted 2023-05-07

【中文标题】在 mPDF 上呈现 CSS 的问题 - PHP

【英文标题】：A problem with rendering CSS on mPDF - PHP

【发布时间】：2019-02-19 22:19:36

【问题描述】：

好的。

问题有点奇怪。

我正在尝试将 html 页面转换为 PDF 文件并保存。

我为此使用 mPDF。但是，CSS 渲染并没有按预期进行。

我没有使用 CSS3。所以，我不认为这是问题所在。

这是应该如何做的屏幕截图：

PDF：

提前致谢。

HTML： https://codepen.io/AKhaled47/pen/omRObM

CSS：

div.calendar
  margin:2pc auto;
  padding:0px;
  width:602px;

div.calendar div.box
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:40px;
    background-color:#890e4f;    
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;  

div.calendar div.header
    line-height:40px;  
    vertical-align:middle;
    position:absolute;
    left:11px;
    top:0px;
    width:582px;
    height:40px;   
    text-align:center;

div.calendar div.header a.prev,div.calendar div.header a.next 
    position:absolute;
    top:0px;   
    height: 17px;
    display:block;
    cursor:pointer;
    text-decoration:none;
    color:#FFF;

div.calendar div.header span.title
    color:#FFF;
    font-size:18px;

div.calendar div.header a.prev
    left:0px;

div.calendar div.header a.next
    right:0px;

div.calendar div.box-content
    background: #FFF;
    border:1px solid #890e4f;
    border-top:none;
    border-radius:5px;
    border-top-left-radius:0;
    border-top-right-radius:0;

div.calendar ul.label
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:5px;
    margin-left: 5px;

div.calendar ul.label li
    margin:0px;
    padding:0px;
    margin-right:5px;  
    float:left;
    list-style-type:none;
    width:80px;
    height:40px;
    line-height:40px;
    vertical-align:middle;
    text-align:center;
    color:#000;
    font-size: 15px;
    background-color: transparent;

div.calendar ul.dates
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-bottom: 5px;

div.calendar ul.dates li
    margin:0px;
    padding:0px;
    margin-right:5px;
    margin-top: 5px;
    line-height:80px;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width:80px;
    height:80px;
    font-size:25px;
    background-color: #DDD;
    color:#000;
    text-align:center; 

:focus
    outline:none;

div.clear
    clear:both;

【问题讨论】：

我对 CSS 不是很熟悉。但是我在您的代码中认识到一件事：您是否在第一个 css 元素中故意使用单位“pc”（Pica）而不是“px”（魔法 css 单元）？如果是故意的，让我们看看你的html代码......你是在使用任何循环来生成你的html吗？

1- 将 pc 更改为 px 没有任何区别。 2-不，我没有。我只是在日历类中使用了 for 循环和 foreach。就是这样。

【参考方案1】：

mPDF 仅部分支持浮点元素。为获得最佳效果，请使用 HTML 表格（非常适合日历）。

请参阅有关浮动的文档：https://mpdf.github.io/what-else-can-i-do/floating-blocks.html

【讨论】：

好吧，让我试试。尽管更改 HTML 对这件事来说意义重大。但一些努力会更好

不幸的是，情况更糟。

检查了我的 HTML 4 次是否有任何非封闭标签等。它在我的网页上显示正常。但不在pdf中。

没有帮助。使用 actual HTML 代码更新您的问题。只是追加，不要为了历史而重写它。

idownvotedbecau.se/imageofcode - 没有人会从 php 代码的图像中重现您的问题。另请参阅 MCVE。