在 mPDF 上渲染 CSS 时出现问题 - PHP
A problem with rendering CSS on mPDF - PHP
好的。
问题有点奇怪。
我正在尝试将 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;
}
mPDF 仅部分支持浮动元素。为获得最佳效果,请使用 HTML table(这对于日历来说是完美的 suitable)。
查看关于浮点数的文档:https://mpdf.github.io/what-else-can-i-do/floating-blocks.html
好的。
问题有点奇怪。
我正在尝试将 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;
}
mPDF 仅部分支持浮动元素。为获得最佳效果,请使用 HTML table(这对于日历来说是完美的 suitable)。
查看关于浮点数的文档:https://mpdf.github.io/what-else-can-i-do/floating-blocks.html