Css Safari打印媒体查询与其他浏览器不匹配/关闭

我有一个web应用程序，在Safari中呈现时看起来不错，但浏览器不尊重打印媒体查询。在Chrome中，整个可打印区域看起来很好，但在Safari中，它似乎只是可见内容的一些变化

当在页面上向下滚动时，页眉或顶部区域被切断，当在页面上更高的位置打印时，底部区域被切断

我尝试了以下关于印刷媒体的查询（没有效果）-

设置一个

最小高度

设置容器上

高度值的任何变化

缩小和打印

改变分辨率/比例

似乎没有任何效果

与Chrome不同，我找不到一种方法来调试为什么会发生这种情况，也找不到一种方法来调试打印样式本身

---

注意-我对样式使用引导，因此有容器、行、跨距等。。。但是，即使完全删除它们，并且所有内容都在它自己的行上，也没有什么区别，同样的“高度”内容也会在印刷品上显示出来。

在上面的评论中指出了这个问题并提到这是一笔免费的赏金之后，我在这里没有得到任何答案。不幸的是，我很想把赏金送走，这样任何在赏金到期前重新寄出的人都可以得到它-

问题是，我使用的应用程序是一个JavaScript应用程序，它运行并创建的页面主体只有大约400px高。主体呈现后，会出现一个单独的引导模式对话框，其中显示了要打印的内容，所有CSS都很好，媒体查询也很好，但模块的内容设置为大于主体

经检查，Safari（可能还有其他浏览器）在计算身体高度时似乎没有考虑对话框的高度

---

Chrome和Firefox对此很满意，因为它打印了所有可见内容，但在Safari中，它只打印与身体一样高的内容，在本例中，身体的高度约为modal的30%。通过手动触发主体，使其<代码>最小高度：1200px它解决了这个问题，因为这是引导模式对话框内容的最大可能高度。

我过去在跨浏览器打印媒体查询方面遇到过很多问题。调整视觉效果的最大帮助是设置固定的页面大小和html/正文

例如：

@media print {
    @page {
        size: 1600px;
    }

    body,
    html {
        width: 1600px;
    }
}

---

在我的例子中，将车身设置为原来的A4宽度->

宽度：210mm

和

高度：100%

解决了这个问题

我一直在使用PrimeFaces中的PDFJS查看器的修改版本 下面是一段在Safari中发挥作用的片段：

@page {
    size: A4;
    margin: 0;
}

html, body {
    width: 210mm; // A4 Paper width
    height: 100%;
}

注意：问题在于预览和打印文档时pdf文档缩放不正确。FF和铬都很好

---

希望它能帮助那些使用PrimeFaces的PDFJS扩展的人。

你能提供一个JSFIDLE作为例子吗？是的，不幸的是JSFIDLE无法复制，我在询问时放弃了。然后当我回去尝试制作一个复制品时，我发现了原因。当用Chrome打印时，这说明了我不只是想打印身体，而是要打印任何可见的东西，Safari没有同样的解释。如果你能给出一个详细的答案，我很乐意赏金。诀窍是对打印内容使用模式或对话框，这样它就不会影响身体的整体高度。@Dekel当时在You，我无法重现这个问题（如果不查看您的html，将很难提供帮助）。请注意，如果您使用的是

rel

标签，则在其他媒体查询之后显示

print

媒体查询非常重要。如果您没有使用

rel

标记，而是使用内联

样式

标记-请添加一些代码（它可以是一个只在作为完整页面使用时才“工作”的JSFIDLE，而不是在JSFIDLE结构中），这样我们就可以尝试复制。@PWKad，因为Safari对语法要求严格。查看其他媒体查询中所有打开和关闭的

{}

括号。这可能是个问题。