我的 CSS 有不同的处理方式吗？
我有一些 html 代码和一些 CSS 样式，试图生成一个 PDF，其中我的示例文本容器/div 向右浮动。如果我自行加载 html 站点，则 CSS 都是正确的并且看起来不错。但是当我从代码转换为 PDF 文件时，它输出错误。谁能提出可行的方法？
我的代码:
<html>
<head>
<style>
@page {
margin: 0px 0px 0px 0px;
}
body {
height: 100%;
margin: 0px 0px 0px 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
div.mainLayout{position: relative;float:right;width:50%;height:100%;}
.textstuff {
background-color:aqua;
left:0;
height: 100%;
width:100%;
}
</style>
</head>
<body>
<div id="top">
<div class="mainLayout">
<div class="textstuff">
<center>
<font size="5" style="padding-bottom:5px">Sample Text 1</font><br />
<font size="4" style="padding-bottom:5px">Sample Text 2</font><br />
<font size="5" style="padding-bottom:25px">Sample Text 3</font><br />
<font size="4">Sample Text 4</font>
</center>
</div>
</div>
</div>
<div id="bottom">
<div class="mainLayout">
<div class="textstuff">
<center>
<font size="5" style="padding-bottom:5px">Sample Text 1</font><br />
<font size="4" style="padding-bottom:5px">Sample Text 2</font><br />
<font size="5" style="padding-bottom:25px">Sample Text 3</font><br />
<font size="4">Sample Text 4</font>
</center>
</div>
</div>
</div>
</body>
</html>
被呈现为 HTML 文件的内容(正确):
什么被呈现为 PDF 文件(输出不正确，应该像上面的那样):
最佳答案
我修改了 CSS 以处理 PDF:
<style>
@page {
margin: 0px 0px 0px 0px;
}
body {
height: 100%;
margin: 0px 0px 0px 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#top, #bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
div.mainLayout{height:100%;}
.communitylogotop {
bottom: 41px;
}
.text {
margin-right:50px;
margin-top:65px;
width:44%;
float:right;
}
</style>
我的 body 现在是这样的:
<div id="top">
<div class="mainLayout">
<div class="text">
HERE's..
</div>
</div>
</div>
<div id="bottom">
<div class="mainLayout">
<div class="text">
...STUFF
</div>
</div>
</div>
关于html - DOMPDF:为什么在将页面分成两半时 CSS 无法正确呈现为 PDF？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37032411/