CSS打印预览边距

时间:2014-07-22 11:31:24

标签: html css printing margins printing-web-page

我正在尝试在Internet Explorer 11打印预览中设置页面上的边距大小。我也试图清除任何内容的边缘(例如页码,标题,网址等)

我已设法设置边距大小,但我无法清除内容。这是我的代码:有人能发现我做错了吗?一旦我将它用于上边距,我就可以将修复复制到其余部分。

<!DOCTYPE HTML>
<html>
<head>
<title>Print Test</title>       

<style type="text/css">

@page {
    margin-top: 50mm;
    margin-bottom: 50mm;
    margin-left: 50mm;
    margin-right: 50mm;

    @top-left-corner {content: none}
    @top-left {content: none}
    @top-center {content: none}
    @top-right {content: none}
    @top-right-corner {content: none}    
}

</style>    
</head>
<body>
    <h1>Header Here</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

唯一想到的是:第一,:blank,:left和:right说明符具有比@page本身更高的级别特异性。

尝试将其全部覆盖:

@page, @page :first, @page :right, @page :left, @page :blank {
    @top-left-corner {content: none}
    @top-left {content: none}
    @top-center {content: none}
    @top-right {content: none}
    @top-right-corner {content: none}  
}

更新:我花了大部分时间在PrinceXML中渲染。我没想过检查浏览器支持。现在我发现大多数浏览器都支持(请参阅Margin boxes support。)