ZURB基金会5的媒体打印分页 我想使用基础5 CCS框架从我的站点打印一些页面。在我的css中,我添加了以下行: @media print { hr.page-break{page-break-after:always!important;} }
我使用.page break类简单地添加新的打印页面,但不起作用。ZURB基金会5的媒体打印分页 我想使用基础5 CCS框架从我的站点打印一些页面。在我的css中,我添加了以下行: @media print { hr.page-break{page-break-after:always!important;} },css,printing,zurb-foundation,Css,Printing,Zurb Foundation,我使用.page break类简单地添加新的打印页面,但不起作用。 当移除所有基础5样式时,新页面按预期打印。有什么想法吗?这些是F5唯一的打印样式(来自/foundation/components/\u type.scss),所以我没有看到任何与hr相关的内容 @media print { * { background: transparent !important; color: #000 !important; /* Black prints faste
当移除所有基础5样式时,新页面按预期打印。有什么想法吗?这些是F5唯一的打印样式(来自
/foundation/components/\u 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; }
}
还有-不要认为这很重要,但我从未见过使用的select!重要信息
附加到一个值上,中间没有空格,因此我在那里放了一个空格。我发现:
.columns {
float:left;
}
或多或少地使分页符-*
属性为空。如果元素有一个类为.columns
的父元素,这可能就是问题所在
处理此问题的一种简单方法是移除上层元素的浮动,方法如下:
@media print {
div.columns {
float:none;
}
}
我偶然发现了这条线索,因为我正在寻找一种更具选择性的方法来做同样的事情。这一总体变化可能会弄乱页面的外观