Safari 打印不同于 Chrome + Firefox (html/css)

Question

我正在尝试通过浏览器打印 avery 5160/8160 的条码表。我找到并修改了代码 https://boulderinformationservices.wordpress.com/2011/08/25/print-avery-labels-using-css-and-html/

它在 Firefox + Chrome 中完全符合我的要求；但在 Safari 中，它会在垂直和水平方向上偏离中心。

是检测用户代理并拥有仅适用于 Safari 的代码的唯一选项吗？ Safari 是否有不同的英寸测量方法？

这是 chrome 的输出：

这里是 safari 的输出：

这是使用的代码：

 <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

媒体打印未关闭

}