Firefox 打印 CSS - A4 页面上的额外空白页

Question

我创建了一个简单的打印 CSS，它生成了一个 A4 页面。

<!doctype html>
<html>
<head>
<style media="print">
    * {margin:0;padding:0}
    @page {size: 297mm 210mm; margin:0mm;}
    html, body {width: 297mm; height: 210mm}
    html {background-color:red}
    body {background-color:green}
</style>
</head>

<body>
    <p>TEST</p>
</body>
</html>

对于 Firefox 38.0.1，在 打印预览 window 中，body（绿色）有一个额外的高度，会触发第二页

如果我打印文件，打印了2页，所以这不是只与打印预览有关的问题。

我已经删除了 页面设置 部分的所有边距以及 Firefox 添加的所有额外元素（如标题、url、日期...）

Chrome43.0.2357.81上的同一个页面没有任何问题

我该如何解决？

Answer 1

使用这个，它会直接工作:)

<!doctype html>
<html>
    <head>
        <style>
            @media print {
                * {margin:0;padding:0}
                @page {size: A4 landscape; margin:0mm;}
                html, body {height: 100%;}
                html {background-color:red}
                body {background-color:green}
            }
        </style>
    </head>
    <body>
        <p>TEST</p>
    </body>
</html>

Firefox 打印 CSS - A4 页面上的额外空白页

Firefox print CSS - Extra blank page on A4 page

html

css

firefox

print-css