Question

我正在编写用于打印网页的CSS样式表，并遇到以下问题： Firefox为@page指令添加了额外的保证金。

这是一个例子。

HTML：

<html>
    <head>
        <title>CSS Print Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="content">
            Print Me!
        </div>
    </body>
</html>

CSS：

html,
body,
div {
    margin: 0;
    padding: 0;
}

#content {
    border: 1px solid;
}

@page
{
    size: A4 portrait;
    margin: 30mm 30mm 30mm 30mm;
    padding: 0;
}

这应该给页面每边3厘米的边距。它适用于Chrome（29.0）和IE 10，但不适用于Firefox（21.0）。使用Firefox打印页面时，每边的边距类似于35mm。

是否有一个简单的解决方案或至少解释这种行为？

Answer 1

试试这个：

@page { /* for for all browsers except Firefox */
    size: A4 portrait;
    margin: 30mm;
    padding: 0;
}

@-moz-document url-prefix() { /* only for Firefox, page margin - 5mm */  
    @page {margin:25mm;}
}

Firefox为@page指令增加了5mm的额外余量

1 个答案: