Print media acts differently in Firefox and Chrome - html

Question

I am using #media print to generate a report. When I print it in chrome, it is fine, while in Firefox, the components are messed up in the positions. My code is provided as below in two different sections: the first one is the CSS styling and the next one the HTML code.
How can I write this code to work in Chrome and Firefox?
#media print {
.print-only {
display: block;
}
a[href]:after {
content: none !important;
}
object {
width: 160mm;
height: 120mm;
}
button, alert-danger, .no-print {
display: none !important;
}
.top-left-corner-print {
position: absolute;
top: 160px;
left: 50px;
font-size: 14px;
width: 200px;
}
.top-left-print {
position: absolute;
top: 160px;
left: 250px;
font-size: 14px;
width: 200px;
}
.top-print {
position: absolute;
top: 156px;
left: 450px;
font-size: 14px;
width: 200px;
}
.top-right-print {
position: absolute;
top: 160px;
left: 650px;
font-size: 14px;
width: 200px;
}
.top-left-print-second-row {
position: absolute;
top: 565px;
left: 60px;
width: 200px;
font-size: 20px;
}
.top-left-print-third-row {
position: absolute;
top: 950px;
left: 60px;
width: 200px;
font-size: 20px;
}
.print-audiogram-graph {
border: none !important;
position: absolute;
top: -170px;
left: 10px;
width: 95%;
height: 95%;
}
.print-abTest-graph {
border: none !important;
position: absolute;
top: 540px;
left: 50px;
width: 40%;
height: 40%;
}
.tympanometry-print {
border: none !important;
position: absolute;
top: 610px;
left: 420px;
}
.ipsi-reflex-print {
border: none !important;
position: absolute;
top: 780px;
left: 420px;
}
.contra-reflex-print {
border: none !important;
position: absolute;
top: 920px;
left: 420px;
}
.comment-print {
position: absolute;
top: 1010px;
left: 40px;
width: 360px;
word-break: break-all;
}
.no-border-print {
border: none;
}
aside#sidebar, header[role="banner"], footer, #comments, #respond {
display: none;
}
.page-header {
vertical-align: middle;
text-align: center;
border-bottom: none;
}
}
<div class="h2 page-header">Audiology Session</div>
<div class="alert alert-info top-buffer no-border-print" data-bind="with: metadata">
<div class="row">
<h4 class="col-md-6 top-left-corner-print" id="">
Client: <a data-bind="text: subjectName"></a>
</h4>
<h4 class="col-md-4 top-left-print">
Date: <span data-bind="text: date"></span>
</h4>
</div>
<div class="top-buffer"></div>
<div class="row">
<h4 class="col-md-6 top-right-print">
Clinician: <a data-bind="text: clinicianName"></a>
</h4>
<h4 class="col-md-4 no-print">
Clinic:
<span data-bind="css: { performedByBsh: performedByBsh }">
<span data-bind="text: clinic, css: { bshClinicUnset: bshClinicUnset }"></span>
</span>
</h4>
</div>
</div>
<div style="text-align:left; width:750px; max-width:100%">
<h3 class="no-print" style="margin-top:50px">Audiograms</h3>
<p class="top-print">Transducer: <span data-bind="text: transducer"></span></p>
<object class="print-audiogram-graph" id="audiogram-graph" type="image/svg+xml" data="~/Content/audiogram.svg" style="border:1px solid gray">
Your browser does not support svg objects.
</object>
</div>
<div style="text-align:left; width:450px; max-width:100%">
<h3 class="top-left-print-second-row" style="margin-top:50px">A/B Tests</h3>
<object class="print-abTest-graph" id="ab-test-graph" type="image/svg+xml" data="~/Content/abTest.svg" style="border:1px solid gray">
Your browser does not support svg objects.
</object>
</div>
<div>
<h3 class="no-print" style="margin-top:50px">Tympanometry</h3>
<div data-bind="with: $data.tympanometry()">
<div class="AudiologySession no-print" data-bind="visible: canShowTympanometryFields">
#Html.Partial("~/Views/Person/_TympanometryPartial.cshtml")
</div>
<div class="print-only">
#Html.Partial("~/Views/Person/_TympanometryPrintOnly.cshtml")
</div>
</div>
</div>
<div>
<h3 class="no-print" style="margin-top:50px">Reflexes</h3>
<div data-bind="with:reflexes">
<div class="AudiologySession no-print" data-bind="visible: canShowReflexFields">
#Html.Partial("~/Views/Person/_ReflexPartial.cshtml")
</div>
<div class="print-only">
#Html.Partial("~/Views/Person/_ReflexPrintOnly.cshtml")
</div>
</div>
</div>
<h3 class="top-left-print-third-row" style="margin-top:50px">Comments</h3>
<div class="comment-print" data-bind="with:metadata">
<div data-bind="visible: !editor.editing()">
<span data-bind="text: comment"></span>
</div>
<div data-bind="visible: editor.editing()">
<textarea maxlength="200" placeholder="Your comment…" type="text" data-bind="value: comment"></textarea>
</div>
</div>
Can anyone tell me what I am missing?

Answer 1

I could not find the best solution but using mm instead of px helped a lot to get a more close behavior in Firefox and Chrome and also using flex as follows in my css:
#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;
}
.
.
.
and in the html:
<div class="print-content-box">
<div class="1">
.
.
.
</div>
<div class="2">
.
.
.
</div>
.
.
.
</div>