时间戳

首页 > 解决方案 > 打印文档中未保留填充

css - 打印文档中未保留填充

问题描述

我正在尝试创建用于在 Firefox 中打印文档的 css 样式。我想要一些内容，放置在容器内，顶部和底部的间距相等。

为此，我添加了一个具有顶部和底部填充的容器，并在其中放置了一些内容：

<div class="container" style="padding: 1cm 0; box-decoration-break: clone">
    ...some content ("div", "p" elements)
</div>

现在，Firefox 支持box-decoration-break css 属性（允许在容器“命中”分页符时重复边框/填充/边距）。

我正在为容器设置“ box-decoration-break: clone ”并期望发生以下行为：

Printed page 1:
------------
|          | <- correct spacing
|  content |
|  content |
|          | <- correct spacing
------------

Printed page 2:
------------
|          | <- correct spacing
|  content |
|  content |
|          | <- correct spacing
------------

实际上，这正在发生：

Printed page 1:
------------
|          | <- correct spacing
|  content |
|  content |
|  content | <- (!) incorrect spacing, content "ignores" parent padding
------------

Printed page 2:
------------
|          | <- correct spacing
|  content |
|          |
|          |
------------

我可以使内容尊重父元素填充的唯一方法是将容器的所有子元素设置为“显示：内容”（这会破坏所有其他样式并使其看起来很难看）

我想就以下问题获得帮助：

1）在打印文档的特定容器内创建填充的正确方法是什么？

2）为什么我的方法不起作用？

谢谢

标签： cssfirefoxmedia-queries

解决方案

推荐阅读