您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

禁用页面的浏览器打印选项(页眉,页脚,边距)?

禁用页面的浏览器打印选项(页眉,页脚,边距)?

CSS标准启用了一些高级格式。@pageCSS中有一个指令,可启用某些仅适用于分页媒体(如纸张)的格式。。

缺点是不同浏览器中的行为不一致。Safari仍然完全不支持设置打印机页面页边距,但是所有其他主流浏览器现在都支持它。

使用@page伪指令,您可以指定页面的打印机页边距(与HTML元素的普通CSS页边距不同):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

请注意,我们基本上在这里禁用了页面特定的页边距,以达到删除页眉和页脚的效果,因此我们在正文上设置的页边距将不会在分页符中使用,这意味着它将只能工作如果打印的内容只有一页,则正确。

这在 , , 或 不起作用。

边距在 , , 和 确实有效。 尽管在这些浏览器中为您的内容正确设置了页边距,但是这种行为在尝试解决页眉/页脚的隐藏方面并不理想。

在 ,此打印设置中的边距实际上设置为0mm,如果执行“预览”,则认为0mm,但用户可以在预览中进行更改。 你会看到页面内容实际上是 定位 正确,但浏览器打印页眉和页脚显示与非透明背景,因此有效地隐藏在该位置的页面内容

在 较新版本中,它的 位置 正确,但是同时显示了页眉/页脚文本和内容文本,因此,它看起来像是浏览器标题文本和页面内容的混合体。

在 ,当在标准CSS中使用非透明背景并且页眉/页脚位置与内容冲突时,页面内容会隐藏页眉。很好,但是如果margin设置为较小的值(导致标头部分可见),则看起来很奇怪。另外页边距设置不正确。

在 较新的版本中,如果@page页边距设置得太小,以致页眉/页脚位置与内容冲突,则浏览器的页眉和页脚将被隐藏。在我看来,这正是应该如何表现。

因此结论是,就隐藏页眉/页脚而言, 具有最佳的实现方式。

其他 2022/1/1 18:21:50 有493人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶