Chrome 最新版本 - 修复了 css 位置和 jquery.print() 上的底部 0 问题
Kat*_*n K 5 html javascript css google-chrome
重现问题的步骤：
/* Styles go here */
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
@page {
margin: 20mm;
}
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
}
:picture-in-picture ;<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br />
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">I'm The Footer</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3">
PAGE 3 - Long Content
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
tincidunt metus eu consectetur rutrum. Praesent tempor facilisis
dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia
non odio et condimentum. Aenean faucibus cursus mi, sed interdum
turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros,
posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse
ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi.
Pellentesque faucibus nisl et dolor pharetra, vel mattis massa
venenatis. Integer congue condimentum nisi, sed tincidunt velit
tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent
consectetur volutpat nibh, quis pulvinar est volutpat id. Cras
maximus odio posuere suscipit venenatis. Donec rhoncus scelerisque
metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor
id urna vel, volutpat blandit velit. Cras sit amet sem eros.
Quisque commodo facilisis tristique. Proin pellentesque sodales
rutrum. Vestibulum purus neque, congue vel dapibus in, venenatis
ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae
lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc
interdum, sed facilisis ex pellentesque.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>问题描述：我相信您已经检查过我的代码，我尝试在不同的 chrome 版本和不同的浏览器中检查代码
Chrome 版本 - 117.0.5938.92 在此版本中，打印页脚未放置在底部，它没有放置在底部，它向上移动了一点
Chrome 版本 116.0.5845.187（官方版本）（x86_64）在此版本中，其打印功能工作正常，但在最新版本中，只有我们面临此类问题
即使在其他浏览器中也能正常工作
补充评论：
Chrome版本：17.0.5938.92 频道：稳定
操作系统：Mac操作系统
在最新的 chrome 版本上 - 17.0.5938.92
旧 Chrome 版本 - 116.0.5845.187
请参考屏幕截图和上面的共享代码。我们仅在 Chrome 最新版本中修复了此位置问题
旧版本的chrome和其他浏览器工作正常
请建议我们如何解决这个问题
小智 0
尝试在表格内添加页眉和页脚，如下所示
@page {
size: 8in 11in;
}
.page {
page-break-after: always;
}
.header {
height: 60px;
}
.header>div {
position: fixed;
top: 0;
width:100%;
}
.footer {
height: 60px;
}
.footer>div {
position: fixed;
bottom: 0;
width:100%;
}
body {
font-size: 24px;
font-family: sans-serif;
text-align:center;
}<button onclick="print()">print</button>
<table>
<thead>
<tr>
<td class="header">
<div>header</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="page">page 1</div>
<div class="page">
<div>page 2</div>
</div>
<div class="page"><div>page 3</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="footer">
<div>footer</div>
</td>
</tr>
</tfoot>
</table>