CSS打印显示白色条

3pvhb19x 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(89)

我试图创建一个票宽度的尺寸（203mmx82mm）。这是在HTML和CSS通过python（cgi，jinja2，weasyprint）的模板将被转换为PDF，用户可以通过网站上的按钮下载。
HTML Body：

<body>
    <div id="ticket"></div>
</body>

我的CSS：

body{
    margin: 0;
    padding: 0;
    height: 82mm;
    width: 203mm;
    background: red;
}
#ticket{
    height: 82mm;
    width: 203mm;
    background-color: red;
    margin: 0 auto;
}
@page{
    size: 203mm 82mm;
    margin: 0;
    padding: 0;
}

我选择红色是为了看得更清楚。即使Body的颜色与票的颜色相同，我仍然会在打印预览中得到一个奇怪的边框（见下图）

在实际的PDF上也可以看到白色条。谁能帮帮我？

css

来源：https://stackoverflow.com/questions/76243570/css-print-shows-white-bar

2条答案

按热度按时间

vnzz0bqm1#

通过将@page规则的margin属性设置为0，可以删除页面上的默认边距。与此类似，从body元素中删除默认边距需要将body规则的margin属性设置为0。通过这样做，你应该保证你的票充满了整个页面，白色的酒吧消失了。
此外，您可以考虑将#ticket元素的box-sizing属性设置为border-box，它将填充和边框包含在元素的总宽度和高度中，这样您就不必担心它们会影响票证的整体尺寸。下面是你的CSS更改与以下变化：

@page {
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  height: 82 mm;
  width: 203 mm;
  background: red;
}

#ticket {
  height: 82 mm;
  width: 203 mm;
  background color: red;
  margin: 0 auto;
  box-sizing: border-box;
}

赞(0）回复(0）举报 2023-05-19

aij0ehis2#

在删除

@page{
    size: 203mm 82mm;
    margin: 0;
    padding: 0;
}

和一个电脑重启我插入agian的片段.现在起作用了

赞(0）回复(0）举报 2023-05-19

我来回答

CSS打印显示白色条

2条答案

相关问题

热门标签

最新问答