打印时出现额外的空白页（IE 除外）- 是我的打印 css 吗？答案

【问题标题】：Extra blank page when I print (except in IE) - is it my print css?打印时出现额外的空白页（IE 除外）- 是我的打印 css 吗？
【发布时间】：2013-06-17 10:32:18
【问题描述】：

我正在使用 print css 来隐藏某些元素，并在我不想要它们时停止分页符。用户可以选择在打印之前隐藏部分。

我的问题是，当我打印预览时，总是有一个额外的空白页（在 Chrome 和 Firefox 的末尾，在 Opera 的开头），我不知道为什么。 IE没有问题，没有多余的页面（令人震惊...）

我将不胜感激。我试过制作容器 div page-break-after: Avoid;和分页后：自动；但都没有奏效。还取出 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; }
}

非常感谢您的帮助:)

【问题讨论】：

没关系，但您是否尝试将排除元素的高度设置为 0？
请指定您遇到问题的 IE 版本。
@Nix - 感谢您的建议，但没有任何区别。
@Spudley 问题不是 IE（大概）。其他都是。
@tekiegirl 也许你可以通过在浏览器中加载打印样式表来调试它？

标签： css printing cross-browser

【解决方案1】：

大多数时候你会指定

html, body { width: 100%; height: 100%; }

您浏览器中的打印驱动程序不喜欢这样。所以要解决这个问题，只需将其添加到您的 print.css 文件中

html, body { height: auto; }

不再打印空白页。

解决方案在此page 中进行了解释希望对大家有帮助

【讨论】：

为我解决了。我使用 SCSS 中的媒体查询实现了它。
那里只是一个损坏的链接:(。

【解决方案2】：

我建议您尝试使用 CSS 重置。重置应该帮助不同的浏览器以相同的方式显示网站。您可以在http://meyerweb.com/eric/tools/css/reset/ 尝试使用它，但我从未使用过它，所以我不能说它是如何工作的。您也可以尝试使用谷歌搜索专门针对打印样式的 CSS 重置。

【讨论】：

【解决方案3】：

对于 Firefox：如果空白页在打印预览中可见，请转到打印--> 页面设置并减小比例，直到空白从打印预览中消失。这对我有用。

【讨论】：

【解决方案4】：

要使用媒体查询而不是单独的 print.css 来解决此问题，请尝试以下操作：

html, body {
    height: 100%;
    @media print {
        /* This fixes an issue where when printing a selection,
         an extra blank page is printed in IE10 and IE11.
         Solution found here: http://stackoverflow.com/a/22320644/7752 */
        height: auto;
    }
}

【讨论】：