chrome和IE在我的内容页面之后打印两个空白页面,在FireFox中它工作正常

时间:2015-10-05 20:03:41

标签: javascript html css

我的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尺寸的一半长度。我想不再需要额外的页面了。

0 个答案:

没有答案