Zurb Foundation 5 的媒体打印分页符答案

【问题标题】：Page break for media print for Zurb Foundation 5Zurb Foundation 5 的媒体打印分页符
【发布时间】：2013-12-19 14:54:18
【问题描述】：

我想使用 Foundation 5 ccs 框架从我的站点打印一些页面。在我的 CSS 中，我添加了以下几行：

@media print {
   hr.page-break{page-break-after:always!important;}      
}

我使用 .page break 类来简单地添加新页面进行打印，但没有用。删除所有基础 5 样式时，新页面按预期打印。有什么想法吗？

【问题讨论】：

标签： css printing zurb-foundation

【解决方案1】：

这些是 F5 的唯一打印样式（来自 /foundation/components/_type.scss），所以我看不到任何与 hr 相关的内容。

  @media print {
    * {
      background: transparent !important;
      color: #000 !important; /* Black prints faster: h5bp.com/s */
      box-shadow: none !important;
      text-shadow: none !important;
    }

    a,
    a:visited { text-decoration: underline;}
    a[href]:after { content: " (" attr(href) ")"; }

    abbr[title]:after { content: " (" attr(title) ")"; }

    // Don't show links for images, or javascript/internal links
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after { content: ""; }

    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }

    thead { display: table-header-group; /* h5bp.com/t */ }

    tr,
    img { page-break-inside: avoid; }

    img { max-width: 100% !important; }

    @page { margin: 0.5cm; }

    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }

    h2,
    h3 { page-break-after: avoid; }

    .hide-on-print { display: none !important; }
    .print-only { display: block !important; }
    .hide-for-print { display: none !important; }
    .show-for-print { display: inherit !important; }
  }

另外 - 不要认为这很重要，但我从未见过将 !important 附加到一个没有中间空格的值的选择，所以我会在那里放一个空格。

【讨论】：

【解决方案2】：

我发现：

.columns {
  float:left;
}

或多或少会使page-break-* 属性无效。如果你的元素有一个父类 .columns 这可能是问题。

解决这个问题的一个简单方法是删除上层元素的浮动，例如：

@media print {
  div.columns {
    float:none;
  }
}

我偶然发现了这个线程，因为我正在寻找一种更有选择性的方法来做同样的事情。这种整体变化可能会破坏您页面的外观。

【讨论】：