3

由于 Firefox 量子我的 CSS 不再工作

当元素内部带有 时，如何强制 Firefox 在下一页上打印display: table？

在外面，它工作正常。

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

@page {
  margin: 0.1mm 12mm 5mm 12mm;
}

.page-break {
  page-break-after: always;
}

.grid {
  display: table;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
}

.header {
  display: table-header-group;
  vertical-align: top;
  height: 15mm;
  min-height: 15mm;
}

.main {
  display: table-row-group;
  vertical-align: top;
}

.footer {
  display: table-footer-group;
  vertical-align: top;
}

.footer-space {
  height: 10mm;
  min-height: 10mm;
}

.footer-fix {
  position: fixed;
  bottom: 0;
}
<div class="grid">
  <!-- GRID -->
  <div class="header">
    <!-- HEADER -->
    HEADER
  </div>
  <!-- HEADER -->
  <div class="footer">
    <!-- FOOTER -->
    <div class="footer-space"></div>
    <div class="footer-fix">Footer</div>
  </div>
  <!-- FOOTER -->
  <div class="main">
    <!-- MAIN -->
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <p>1 test test test</p>
    <p>2 test test test</p>
    <p>3 test test test</p>
    <p>4 test test test</p>
    <p>5 test test test</p>
    <p>6 test test test</p>
    <p>7 test test test</p>
    <p>8 test test test</p>
    <p>9 test test test</p>
    <p>10 test test test</p>
    <div class="page-break"></div>
    <div>NEXT PAGE</div>
  </div>
  <!-- MAIN -->
</div>
<!-- GRID -->

4

0 回答 0