tek*_*irl 10 css printing cross-browser
我正在使用print css来隐藏某些元素,并在我不需要它时停止分页符.用户可以选择在打印之前隐藏部分.
我的问题是,当我打印预览时,总会有一个额外的空白页面(最后在Chrome和Firefox中,在Opera的开头),我无法弄清楚原因.IE没有问题,没有额外的页面(这是令人震惊的......)
我非常感谢一些意见.我尝试过制作容器div page-break-after:avoid; 和分页后:自动; 但都没有奏效.同时取出table.plain {page-break-inside:avoid; 没有什么区别.
当用户单击隐藏图标时,exclude类将添加到表中.这有效,并且带有排除类的任何内容都不会显示在打印中.用户想要打印的最后一页可能适合一页或不适合.
这是我的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; }
}
非常感谢您的帮助:)
mah*_* gh 13
大多数时候你会指定
html, body { width: 100%; height: 100%; }
浏览器中的打印驱动程序不喜欢这样.所以要解决这个问题,只需将其添加到print.css文件即可
html, body { height: auto; }
不再打印空白页.
该解决方案在此说明页面 ,希望可以帮助大家
我建议你尝试使用 CSS 重置。重置应该可以帮助不同的浏览器以相同的方式显示网站。你可以尝试一下http://meyerweb.com/eric/tools/css/reset/，但我从未使用过它，所以我不能真正说出它是如何工作的。您还可以尝试在谷歌上搜索专门针对打印样式的 CSS 重置。