Question

这是一个简单的HTML代码：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
      .page {
        width: 200px;
        height: 500px;
        background: #DD5555;
      }

      @page {
        size: A4;
        margin: 0;
      }

      @media print {
        body {
          margin: 0;
        }
        .page {
          width: 210mm;
          height: 297mm;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">This is a test page</div>
  </body>
</html>

您可以复制/粘贴它以进行检查。

我的问题是：当我在谷歌浏览器中尝试打印预览时，＆＃34;页面＆＃34;元素溢出第一页。

这很奇怪，因为A4尺寸为210 * 297mm

有人知道为什么吗？

（顺便说一下：我正在寻找一些关于CSS打印技术的完整和完整的教程）

注意：Google Chrome版本41.0.2272.118 m

Answer 1

尝试强制将纸张尺寸设置为毫米。问题对我来说已经消失了：

@media print {  
  @page {
    size: 210mm 297mm;
    margin: 0;
  }
}

Answer 2

这似乎是一个错误，但我可以通过将height: 297mm;替换为height: 296.994mm;来解决。（其他浏览器的差异不应该是可见的）

用于打印的CSS：A4 = 210mm * 297mm =溢出？

2 个答案: