Question

我正在使用打印媒体查询来查看在Chrome / Edge / Firefox上正常运行但在Safari上失败的应用。我使用100％的高度来填充打印页面，在safari上它似乎使用百分比作为元素本身的百分比。我在下面放了简化的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>print test</title>
</head>
<style>
    .big{
        border:5px solid black;
    }
    @media print {
        .breaker{
            page-break-before: always;
        }
        .big{
            display:block;
            position:  relative;
            height:100%;
        }
    }
</style>
<body>
    <svg class = "big" width="700px" height="1000px"></svg>
    <div class = "breaker"></div>
    <svg class = "big" width="700px" height="1000px"></svg>
    <div class = "breaker"></div>
    <svg class = "big" width="700px" height="1000px"></svg>
</body>
</html>

Answer 1

根据Can I Use Safari不支持@page和page-after-break

这是关于StackOverflow的类似问题 - Safari Print Media Queries not matching other browsers / cutting off

尝试为正文和HTML设置特定大小。

Safari媒体查询打印不正确使用高度100％

1 个答案: