Safari Print Media查询与其他浏览器不匹配/切断

Question

我有一个Web应用程序,在Safari中呈现时看起来很好,但浏览器不遵守打印介质查询.在Chrome中,整个可打印区域看起来很好,但在Safari中,它似乎只是可见内容的一些变体.

当向下滚动页面时,页眉或顶部区域被切断,当在页面上打印较高时,底部被切断.

我已经尝试了以下打印媒体查询(没有效果) -

1. 设置一个 min-height
2. 设置height容器上值的任何变化
3. 缩小和打印
4. 改变分辨率/比例

似乎没有任何效果.

与Chrome不同,我无法找到调试原因的方法,也无法自行调试打印样式.

注意 - 我正在使用Bootstrap作为样式,因此有容器,行,跨度等......但即使完全删除它们,并且它自己的行上的所有内容也没有区别,内容的相同"高度"在打印时显示.

Answer 1

在上面的评论中指出问题并提到这是免费的赏金后，我还没有得到任何答案。不幸的是，我很乐意放弃赏金，这样任何在赏金到期之前转发此内容的人都可以得到它 -

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

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

Chrome 和 Firefox 对此没问题，因为它打印了所有可见内容，但在 Safari 中它只打印与正文一样高的内容，在本例中约为模态的 30%。通过手动触发主体min-height: 1200px;解决了问题，因为这是引导模态对话框内容的最大可能高度。