标签: print-css
分页符不适用于tbody问题
我生成使用打印报告table在Twitter的引导布局.
我tbody内心有多个table;
虽然page-break-after每个都需要印刷tbody
所以我已经应用了print-css
@media print {
tbody{
page-break-after: auto;
page-break-inside: avoid;
border: none !important;
margin-bottom: 20px !important;
}
}
问题
在应用样式
page-break-after时tbody,分页功能无法正常工作,请参阅此处但是当应用
display:block到tbody给我想要的结果,但表的布局正在发生变化后扭曲tbodydisplay:table-row-group,以display:block看到这里
我想在tbody使用后打破页面page-break-after: auto;.
情景如下
推荐指数
解决办法
查看次数
使用 CSS @page :first 更改打印边距会导致其他页面截断文本
我正在尝试格式化网页以进行打印。第一页是带有全出血背景的封面。其余页面都有页边距。
@page {
margin: 2cm;
}
@page :first {
margin: 0;
}
.cover {
display: block;
height: 100%;
width: 100%;
background-color: green;
page-break-after: always;
}
<div class="cover"></div>
<p>HUGE BLOCK OF BODY TEXT...</p>
第一页看起来很完美，没有边距，但所有其余有边距的页面都被剪掉了文本。
问题似乎出在第一页。当我注释掉第一页的 margin: 0 时，所有剩余页面看起来都是正确的。
是否有使用 @page :first 更改边距的正确方法，并且不会影响其余页面？
推荐指数
解决办法
查看次数
Chrome:打印预览与模拟CSS媒体打印不同
我在Chrome 26中打印页面时出现问题,其中表格显示为灰色背景色.
当我用chrome模拟CSS媒体打印查看页面时,它看起来很好
在Safari中打印时一切正常.任何人都知道如何解决这个问题？
推荐指数
解决办法
查看次数
取消打印广告的高度限制
当我玩这个的时候，我遇到了一些奇怪的事情。在 Firefox 中，当 header 内的 div 高度超过 252px 时， header 将不会重复。尝试使用 Chrome，问题发生在大约 262px 处。以前有人遇到过这种情况吗？有没有办法忽略或重置这个限制？
@media print {
@page {
size: auto;
/* auto is the initial value */
margin: 0mm 0mm 0mm 0mm;
/* this affects the margin in the printer settings */
}
thead {
display: table-header-group;
}
#pgbrk {
page-break-after: always;
}
}
@media screen {
@page {
size: auto;
/* auto is the initial value */
margin: 0mm 0mm 0mm 0mm;
/* this affects the margin in …推荐指数
解决办法
查看次数
Google Chrome处理页面在不同计算机上的中断方式不同
我正在为Web应用程序中的渲染报告完成打印样式表，并已收到有关不同机器上的一些打印问题的通知。在标题之前添加分页符时，我注意到增加了很多空白，这似乎与分页符有关。当我将background-color: green等添加到页面的页眉或页脚时，空白显然不是由于任何一个。我作为备份的Windows 10 OS计算机和Mac OS都创建了一个打印预览文档，该文档可以像我期望的那样兑现分页符，但是另一台运行Windows 10的计算机显示了增加的空白。
更新 -遇到页面中断问题的机器之一仅在特定的WiFi连接上遇到问题。当在我的工作位置连接到WiFi时，问题似乎从他的机器上消失了，但是当在他的工作位置连接到WiFi时，问题再次出现。很奇怪
我正在申请page-break-before: always标题内容，我的网站代码如下：
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
line-height: 1.3;
}
* {
box-sizing: border-box;
}
.page-portrait {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
margin-bottom: 2%;
position: relative;
width: 1350px;
min-height: 279mm;
padding: 30mm;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.report-row-preview {
min-height: 4cm;
}
.header {
margin-top: 1cm;
page-break-before: always; …推荐指数
解决办法
查看次数
Firefox打印CSS - A4页面上的额外空白页面
我创建了一个简单的打印CSS,生成一个A4页面.
<!doctype html>
<html>
<head>
<style media="print">
* {margin:0;padding:0}
@page {size: 297mm 210mm; margin:0mm;}
html, body {width: 297mm; height: 210mm}
html {background-color:red}
body {background-color:green}
</style>
</head>
<body>
<p>TEST</p>
</body>
</html>
使用Firefox 38.0.1,在" 打印预览"窗口中,正文(绿色)具有额外的高度,可触发第二页
如果我打印文件,则会打印2页,因此这不仅仅与打印预览有关.
我已经从页面设置部分删除了所有边距以及Firefox添加的所有额外元素(如标题,网址,日期......)
Chrome 43.0.2357.81上的同一页面没有任何问题 
我怎么解决这个问题？
推荐指数
解决办法
查看次数
外部print.css文件 - 如何使元素仅在打印时可见,在屏幕上不可见？
我目前使用以下作为我的外部print.css文件:
/*删除不需要的元素*/
hiddened,#hiddenbuttons,#header,#nav,.propertyselector,li.hiddentab,ul.hiddentab {display:none; }
/*确保内容跨越整个宽度*/
container,#container2,#content {width:100%; 保证金:0; float:none; }
/*将文字颜色更改为黑色(适用于深色背景上的浅色文字)*/.lighttext {color:#000}
/*提高链接的色彩对比度#781351*/a:链接,a:已访问{颜色:#000}
我理解这是如何使display:none对于我不想在页面上打印的项目.我的问题是:我该怎么做呢？如果页面上有元素我只想在页面打印时可见,在查看页面时不可见,我该怎么办？
有任何想法吗？谢谢.
推荐指数
解决办法
查看次数
图像在打印预览中调整大小
我的网页上有几张图像（不是背景图像），当我以 100% 比例看到打印预览时，图像看起来不错，但我的问题是，当我使用“缩小以适应比例”进行打印预览时，所有图像都会出现小于实际尺寸。我没有在 IMG 标签上提供任何宽度或高度属性，因此我假设在打印预览中它将按照屏幕上显示的方式加载。我已将下面的 css 用于 IMG 的打印媒体，但它不起作用
img {max-width:100%; }
我期望在“Shrink”中具有相同的图像尺寸以适合并且 100% 缩放。
这可能吗？我在 print css 中遗漏了一些东西吗？请指教。
推荐指数
解决办法
查看次数
我们应该将print css放在底部吗？
如果我们</body>在jahoo推荐js 之前将print css放在底部会更好吗,因为只有少数人会打印,如果我们将放在底部,那么它将在screen.css和html之后访问.
推荐指数
解决办法
查看次数