如何解决打印样式无法在macOS Safari打印预览中正确显示
* {
box-sizing: border-box;
}
body {
background-color: #ddd;
margin: 0;
padding: 0;
}
main {
width: 100vw;
height: 100vh;
position: relative;
}
.chrome {
width: 100%;
padding: 0 32px;
left: 0;
height: 64px;
background-color: #ccc;
position: fixed;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
}
.chrome.top {
top: 0;
}
.chrome.bottom {
bottom: 0;
}
.container {
padding: 80px 32px;
position: relative;
z-index: 0;
}
.paper {
background-color: lightblue;
margin: 32px auto;
}
.content {
padding: 32px;
display: flex;
justify-content: space-between;
}
.portrait {
max-width: 210mm;
}
.portrait .content {
min-height: 297mm;
}
**Print CSS**
@page {
size: A4;
margin: 0;
}
@media print {
body {
width: 210mm;
height: 297mm;
}
body * {
visibility: hidden;
}
.chrome {
display: none;
}
.container {
padding: 0;
}
.paper,.paper * {
visibility: visible;
}
.paper {
margin: 0;
width: 297mm;
max-width: auto;
}
}
<main>
<div class="chrome top">
Render UI Header
<button id="print" onclick="window.print()">Print</button>
</div>
<div class="container">
<div class="paper portrait">
<div class="content">
<div>A4 Portrait</div>
<div>Right side stuff</div>
</div>
</div>
</div>
<div class="chrome bottom">
Renderer UI Footer
</div>
</main>
在Chrome打印预览中的外观:
Safari打印预览:
我不知道为什么它不能在Safari中使用。它不尊重Chrome等打印样式吗?我是否有一些晦涩的浏览器设置可能会把它搞糊涂?
解决方法
目前,我遇到了同样的问题,我通过在左侧添加边距来修复它,我需要 A4 格式,因此尺寸为 210x297:
@media print {
#MainDivThatyouHave{
padding: 0 !important;
margin-left: calc(-100vw / 2 + 210mm / 2);
}
html,body{
size: A4 !important;
}
}
您可以使用您想要的宽度而不是 210 毫米,我认为那里不需要 '!important'。
我知道现在回答有点晚了,但如果将来有人遇到同样的问题,这个解决方案应该会有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。