问题:
打印功能(打印页面),预览界面第二页顶部没有间距
问题代码:
<style type="text/css" media="print">
@page {
size: auto;
margin: 0mm;
}
.print-page {/* 页面盒子样式类 */
position: absolute;
width: 1000px;
left: 0;
top: 0;
bottom: 0;
padding: 40px 50px;
margin: auto;
}
...
</style>
修改:
<style type="text/css" media="print">
@page {
size: auto;
margin: 40px 50px;
}
.print-page {/* 页面盒子样式类 */
position: absolute;
width: 1000px;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
...
</style>
当页面内容超过一页打印纸时,盒子的样式中的内边距无法影响到第二页顶部,因此第二页会出现内容贴顶打印效果。
@page用于修改打印页的样式,考虑兼容性可以修改的非常少。仅仅 margin, padding, border 和 background 等打印时需要的属性可以使用, 其他属性将直接忽略, 并且可以使用的属性也只会在打印时生效, 显示时不会生效(margin可以在预览时看到,其他看不得,没有使用打印机实测),并且不要用vh、vm单位。给@page设置margin可以在所有打印页生效。如果想单独设置第一页等需要加伪类:
:first打印文档的时候,第一页的样式:left对打印文档的左侧页样式:right打印文档的所有右页
注意:(谷歌浏览器为例)
- 实际打印效果用户完全可以自己设置打印页面间距
@page设置margin为0时,默认没有显示是否显示页眉页脚选项,边距设置为自定义时会显示页眉页脚选项- 目前没有发现显示页脚,并且去掉页脚网址办法(网上查的方法没成功)
解决打印预览顶部间距问题

4779

被折叠的 条评论
为什么被折叠?



