Safari媒体查询无法正确使用高度100％打印 [英] Safari media-queries print not using height 100% correctly
问题描述
我正在为在Chrome/Edge/Firefox上运行正常但在Safari上无法运行的应用程序使用打印媒体查询.我使用100％的高度以使其填充打印页面，在野生动物园中，它似乎是使用百分比作为元素本身的百分比.我在下面放了简化的代码.
I'm using printing media queries for an app that is working fine on Chrome/Edge/Firefox but is failing on Safari. I'm using height 100% in order to make it fill the printing page, on safari it seems to be using the percentages as a percentage of the element itself. I have put simplified code below.
<!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>
推荐答案
根据我可以使用 Safari不支持@page和page-after-break
According to Can I Use Safari doesn't support @page and page-after-break
这是关于StackOverflow的类似问题- Safari打印媒体查询与其他浏览器不匹配/已切断
This is a similar question on StackOverflow - Safari Print Media Queries not matching other browsers / cutting off
尝试为正文和HTML设置特定的大小.
Try setting a specific size for the body and HTML.
这篇关于Safari媒体查询无法正确使用高度100％打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
