print.css 在不同的浏览器上看起来不同

Question

我有一个用户可以从中打印的页面。但是打印不应该只打印某些元素。

所以我有一个 print.css 文件来处理这个问题：

body{
    font-size:2.5em;
}

container-a{
    display: none;
}

container-b{
    display: none;
}

container-c{
    height: 50%;
    border-bottom: 2px solid black;
}

container-d{
    height: 50%;
    border-bottom: 2px solid black;
}

我在我的 Ubuntu 机器上使用 Chrome 版本 79.0.3945.88 进行开发。所以当我点击Ctrl + P 时，一切看起来都很好。

但是，一旦我使用 Chrome 版本 80.0.3987.163 部署并从我的 Windows 机器上进行检查，格式就完全错误了。字体太大，导致打印页面上只显示一半。

我尝试使用 22px 之类的设置值而不是 2.5em 来设置字体大小，但这并没有改变任何东西。事实上，我必须进入高级设置并将比例从“默认”设置为“自定义 60%”，然后使打印页面看起来像我在开发机器上的打印页面。

为什么会有差异？我想既然我使用 % 和 em 它应该在每个地方看起来都一样？

Answer 1

虽然我很聪明，但两种浏览器的纸张尺寸选项都不相同。