我正在使用 print css 来隐藏某些元素，并在我不需要时停止分页。用户可以选择在打印前隐藏部分。
我的问题是，当我打印预览时，总是有一个额外的空白页(在 Chrome 和 Firefox 的末尾，在 Opera 的开头)，我无法弄清楚为什么。 IE没有问题，没有多余的页面(这令人震惊。。。)
我将不胜感激一些输入。我试过使容器 div 分页后:避免；和分页后:自动；但都没有用。同时取出 table.plain { page-break-inside:avoid; } 没有什么不同。
当用户单击隐藏图标时，排除类将添加到表中。这有效，任何具有排除类的内容都不会在打印中显示。用户想要打印的最后一页可能适合一页，也可能不适合。
这是我的 html:
<body>
<div id="main">
<div id="content">
<div id="side" class="exclude">
...logo, etc, shown at side on screen...
</div>
<div id="data">
<table class="printOnly plain printHeader">
...logo, etc, to print at top...
</table>
<div>
<table class="detail plain">
<tbody>
<tr>
<td class="rel">
<div class="abs exclude visibility">
<a href="#" class="show ico-show ico hid">Show</a>
<a href="#" class="hide ico-hide ico">Hide</a>
</div>
<h3>Contact</h3>
</td>
</tr>
...more tr with contact details...
</tbody>
</table>
...more tables with other details...
</div>
</div> //data
</div> //content
</div> //main
</body>
这是我的打印 CSS:
@media print {
.exclude {
display: none !important;
}
.printOnly {
display:block !important;
}
div#data,
div#data div {
width: 98% !important;
border: none !important;
}
table.plain { page-break-inside:avoid; }
}
非常感谢您的帮助:)
最佳答案
大多数时候你会指定
html, body { width: 100%; height: 100%; }
您浏览器中的打印驱动程序不喜欢这样。所以要解决这个问题，只需将其添加到您的 print.css 文件中
html, body { height: auto; }
不再打印空白页。
解决方案在此 page 中进行了解释 希望对大家有帮助
关于css - 打印时额外的空白页(IE 除外)- 是我的打印 css 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17145413/