时间戳

首页 > 解决方案 > break-before：页面在 Mozilla Firefox 中不起作用

css - break-before：页面在 Mozilla Firefox 中不起作用

问题描述

今天在我的日常工作中，我遇到了这个有趣的错误。我们在一个容器中有两个 div 和许多其他父级。我们想在两个 div 之间粘贴一个分页符，在第二个 div 之前。但是当打印firefox时拒绝分页。铬和即工作正常。在此处输入图像描述

我们有这个html结构：

<div class="flex">
<header></header>
<div>
  <div>
    <section>
      <div>
        <div class="first"></div>
        <div class="second"></div>
      </div>
    </section>
    <aside></aside>
  </div>
</div>
<footer></footer>

这个CSS：

.flex {
  display: flex;
}

.first,
.second {
  width: 90vw;
  height: 50px;
  margin-bottom: 10px;
}

.first {
  background-color: coral;
}

.second {
  background-color: lightblue;
}

@media print {
  .second {
    break-before: page;
  }
}

标签： cssfirefoxpage-break

解决方案

修复很简单：

.flex {
  display: block;
}

推荐阅读