我的css是
@media print {
body * {
visibility: hidden !important;
height: auto;
}
#printSection, #printSection * {
visibility: visible !important;
page-break-inside: auto !important;
page-break-after: avoid !important;
page-break-before: avoid !important;
}
#printSection {
position: absolute !important;
left: 0 !important;
top: 0 !important;
page-break-inside: auto !important;
page-break-after: avoid !important;
page-break-before: avoid !important;
}
#printContent {
page-break-before: avoid !important;
page-break-after: avoid !important;
}
}
and my HTML is
<div class="col-md-12">
<div id="divHeader">
</div>
<div id="divSubHeader">
<table width="100%" style="height: 30px;" class="h1">
<tr>
<td style="text-align: left;">Performance Report
</td>
<td style="text-align: right;">
</td>
</tr>
</table>
</div>
<div id="divContent">
<table border="0">
<tr>
<td class="lbl" width="20%">EMP-Name
</td>
<td>
</td>
<td style="padding-right: 10px; text-align: right;">
</td>
<td width="20%" class="lbl" style="padding-right: 10px; text-align: right;">
</td>
</tr>
<tr>
<td class="lbl" width="20%"> R.No.
</td>
<td>
</td>
<td style="padding-right: 10px; text-align: right;">
enter code here
</td>
<td width="20%" class="lbl" style="padding-right: 10px; text-align: right;">
</td>
</tr>
<tr>
<td class="lbl" width="20%">ID
</td>
<td>
</td>
<td style="padding-right: 10px; text-align: right;">
</td>
<td width="20%" class="lbl" style="padding-right: 10px; text-align: right;"> </td>
</tr>
<tr>
<td class="lbl" width="100%" style="text-align: center;" colspan="4">
</td>
</tr>
<tr>
<td width="100%" colspan="4" style="text-align: center;">
</td>
</tr>
</table>
</div>
</div>
这项工作对我来说很好,在Firefox中,同时在Chrome中执行相同的html和css,IE在我的内容页面之后又增加了两个空白页面,这只是内容中A4尺寸的一半长度。我想不再需要额外的页面了。