Html 印刷媒体在Firefox和Chrome中的作用不同

我正在使用@media print生成报告。当我在chrome上打印它时，一切正常，而在Firefox中，组件在位置上乱七八糟。我的代码分为两个部分：第一部分是CSS样式，第二部分是HTML代码

如何在Chrome和Firefox中编写此代码

@媒体印刷品{ .仅打印{ 显示：块； } a[href]：之后{ 内容：无！重要； } 反对{ 宽度：160毫米； 高度：120毫米； } 按钮，警告危险，无打印{ 显示：无！重要； } .左上角打印{ 位置：绝对位置； 顶部：160px； 左：50px； 字体大小：14px； 宽度：200px； } .左上角打印{ 位置：绝对位置； 顶部：160px； 左：250px； 字体大小：14px； 宽度：200px； } .顶印{ 位置：绝对位置； 顶部：156px； 左：450px； 字体大小：14px； 宽度：200px； } .右上角打印{ 位置：绝对位置； 顶部：160px； 左：650px； 字体大小：14px； 宽度：200px； } .左上角打印第二行{ 位置：绝对位置； 顶部：565px； 左：60px； 宽度：200px； 字体大小：20px； } .左上角打印第三行{ 位置：绝对位置； 顶部：950px； 左：60px； 宽度：200px； 字体大小：20px； } .打印听力图{ 边界：没有！重要； 位置：绝对位置； 顶部：-170px； 左：10px； 宽度：95%； 身高：95%； } .打印测试图{ 边界：没有！重要； 位置：绝对位置； 顶部：540px； 左：50px； 宽度：40%； 身高：40%； } .鼓室压描记术{ 边界：没有！重要； 位置：绝对位置； 顶部：610px； 左：420px； } .ipsi反射打印{ 边界：没有！重要； 位置：绝对位置； 顶部：780px； 左：420px； } .对映反射印花{ 边界：没有！重要； 位置：绝对位置； 顶部：920px； 左：420px； } .评论打印{ 位置：绝对位置； 顶部：1010px； 左：40px； 宽度：360px； 单词break：打破一切； } .无边框打印{ 边界：无； } asidesidebar，页眉[角色=横幅]，页脚，评论，回复{ 显示：无； } .页眉{ 垂直对齐：中间对齐； 文本对齐：居中； 边框底部：无； } } 听力学会议 客户： 日期： 临床医生： 诊所： 听力图

传感器：

您的浏览器不支持svg对象。 A/B测试 您的浏览器不支持svg对象。 鼓室测量 @Html.Partial~/Views/Person/_tympommetrypartial.cshtml @Html.Partial~/Views/Person/_tympometryprintonly.cshtml 反射 @Html.Partial~/Views/Person/\u ReflexPartial.cshtml @Html.Partial~/Views/Person/_ReflexPrintOnly.cshtml 评论

---

我找不到最好的解决方案，但使用mm而不是px有助于在Firefox和Chrome中获得更接近的行为，并在css中使用flex，如下所示：

@media print {
    .print-only {
        display: block;
    }

    .wrapper-print {
        display: grid;
        grid-template-columns: 40% 10% 30% 20%;
        grid-template-rows: 6mm 6mm 103mm auto auto;
    }
    .print-content-box {
        grid-row: 4;
        grid-column: 1/5;
        display: flex;
        flex-flow: column wrap;
        max-height: 140mm;
    }
.
.
.

在html中：

<div class="print-content-box">
    <div class="1">
    .
    .
    .
    </div>
    <div class="2">
    .
    .
    .
    </div>
.
.
.
</div>

---

两者有什么特别的不同？你能把这个范围缩小到一个小的可复制的例子吗？当用户按ctrl+p时，我最初尝试将不同的对象放入报告格式，其中一些对象是可选的。说很难重新安排报告中的项目。我提出的解决方案是使用一个网格来指定主要区域，然后在一个特定区域使用一个flex，其中对象是可选的；因此，浏览器可以根据它们的存在自动重新排列它们。是的，你肯定会有更好的运气为设备使用单位。我通常做的是在em上设置所有尺寸。默认情况下，1 em在所有尺寸上都是可读的，如果需要的话，可以很容易地设置不同尺寸（如毫米或英寸）的基本尺寸。