尽管样式相同，但相同的元素打印为不同的字体

Question

我在同一浏览器中无法与我的print css保持一致。

我试图打印一个以相对位置和顶部为中心的div：40em。

CSS

 .wrapper {
    position: absolute;
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    page-break-after: always;
 }


 .centeredDiv {
    position: relative;
    top: 40em;
 }

 .headerStyles {
    font-family: sans-serif;
    font-size: 12pt;
 }

 .imageStyles {
    width: 100%;
    height: 100%;
    z-index: -1; // appear in the background only, with text overlaying it.
 }

中心div包含在一个更大的div中：

HTML

 <div class="wrapper">
        <div class="centeredDiv">
               <div class="headerStyles">Some Text</div>
               <img src="image.png" class="imageStyles">
        </div>
 </div> 

每次尝试打印时，数据集之间的样式都不同。它......对我来说没什么意义。当我使用较长的文本（但仍然是一行）而不是使用较短的文本打印时，字体大小似乎会发生变化。

div的位置（基于centralDiv中的top参数）似乎也与它打印的顶部有多大差异。

我主要通过打印到PDF进行测试。最后，我希望能够创建一个工作/一致的副本，在PDF和纸张中打印类似。并且跨浏览器兼容......但是现在，我主要关注的是Firefox。

非常感谢任何线索/见解。