打印 styles 未在 macOS 上正确显示 Safari 打印预览

Question

代码笔演示

 * { 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 那样尊重打印 styles 吗？ 我是否有一些模糊的浏览器设置可能会搞砸它？

Answer 1

目前，我遇到了同样的问题，我通过在左侧添加边距来修复它，我需要 A4 格式，所以尺寸为 210x297：

@media print {
    #MainDivThatyouHave{
      padding: 0 !important;
      margin-left: calc(-100vw / 2 + 210mm / 2);
    }
    html, body{
      size: A4 !important;
    }
  }

你可以使用你想要的宽度而不是 210mm，我认为那里不需要'.important'。

我知道这是一个迟到的答案，但如果将来有人遇到同样的问题，这个解决方案应该会有所帮助。