Chrome 中的打印预览使用 CSS 样式“溢出：隐藏”更改 div 位置

Question

我为我的问题做了一个 jsFiddle： http://jsfiddle.net/g94xyhbn/1/

当我用 Chrome 打开打印预览（按打印按钮）并选择横向时，结果是下面的框似乎消失了。在我的 CSS 中，在 #outsideDiv 元素的媒体打印部分下，如果我像这样评论 overflow: hidden 行，

@media print
{
    #printButton
    {
        display:none;
    }
    #outsideDiv
    {
        left:0px;
        top:50px;
        /*overflow:hidden;*/
        height:900px;
    }
}

一切恢复正常。我使用 Chrome 版本 38.0.2125.122 m。此外，在纵向模式下，打印预览显示良好。

隐藏溢出与框消失有什么关系？我不明白发生了什么。

Answer 1

它完全按照它所说的那样做。

因为您在#outsideDiv 上定义了height 和width，所以您的CSS 会隐藏所有超出此范围的内容。请记住，像素在屏幕与页面之间的转换比例不同。一页通常为72 PPI（每英寸像素），而打印页通常为300 DPI（每英寸点数）。那里甚至还有单位转换（pixel 到 dot），因为媒介是如此根本不同。

因此，更适合#outsideDiv 大小的单位是in 或cm，具体取决于您更喜欢使用哪个单位。

不过，只要将overflow 设置为hidden，就不会在框的边界之外显示任何内容。

或者，您可以在 print 媒体查询中显式覆盖 height 和 width 规则。这只会告诉 div 扩展到其内容的大小。小提琴中呈现的孤立用例没有真正的区别，但如果在打印的元素周围有元素，它将导致#outsideDiv 在 DOM 流中为自己正确保留空间。