Safari Printing differently than Chrome + Firefox (html/css)

Question

I am attempting to have barcode sheet printing for avery 5160/8160 via browser. I found and modified code from https://boulderinformationservices.wordpress.com/2011/08/25/print-avery-labels-using-css-and-html/

It works exactly how I want in Firefox + Chrome; but in Safari it prints off center both vertically and horizontally.

Is the only option to detect the user agent and have code just for Safari? Does Safari have different ways of measuring inches?

Here is output from chrome:

Here is output from safari:

Here is code used:

 <style>

 @media print
 {
    html
    {
        margin: 0;
        padding: 0;
    }

    body {
         width: 8.5in !important;
         margin: .5in .1875in 0 .1875in !important;
        }

        .hidden-print
        {
            display: none;
        }

       @page {
         margin: 0;
         padding: 0;
       } 
    }


 .barcode-label{
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
     width: 2.325in;
     height: 1.02in;
     padding: .015in .15in 0 .15in;
     margin-right: .195in;
      font-size: 10pt;
     float: left;
      line-height: 1em;
      letter-spacing: normal;

     text-align: center;
     overflow: hidden;

     outline: 1px dotted;
     }

     .page-break  {
     clear: left;
     display:block;
     page-break-after:always;
     }
 </style>

 <h1 class="hidden-print" style="text-align: center;">Avery 8160 <?php echo lang('common_template');?></h1>
<div class="hidden-print" style="text-align: center;margin-bottom: 10px;">
    <button class="btn btn-primary text-white hidden-print" id="print_button" onclick="window.print();"><?php echo lang('sales_print'); ?></button> 
</div>


 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

 <div class='barcode-label'>PHP Point Of Sale, LLC<br />
    <img src='http://home.chrismuench.com/phppos/PHP-Point-Of-Sale/index.php/barcode?barcode=0000000001&text=0000000001&scale=1' /><br /> 
        <span style="font-size:12pt;">$11.20</span>: test
 </div>

Answer 1

media print is not closed with

}