打印时绝对定位元素的位置不正确

Placement of absolutely positioned elements incorrect when printing

本文关键字：位置 不正确 元素 定位 打印      更新时间：2023-09-26

我目前正面临一个奇怪的问题(嗯，很可能我只是没有意识到一些重要的事情)。

我有以下html片段

<div id="test">
  Hallo Welt
</div>

和下面的javascript片段:

<script type="text/javascript">
  $(function () {
    $('#test').offset({
      position: 'absolute',
      width: '100px',  
      left: ($('body').width() - $('#test').width()) / 2.0
    })
  });
</script>

这应该使测试div水平居中，这在浏览器中工作得很好。但是，当我尝试打印此页面时，该元素显示在打印页面的右上角，而不是在中间。

我想也许使用像素来定位打印元素有问题，所以我尝试了其他措施，如em:

<script type="text/javascript">
  $(function () {
    $('body, #test').css({ 'font-size': '12px' });
    $('#test').css({
      left: (($('body').width() - $('#test').width() ) / 24.0) + 'em'
    })
  });
</script>

但不幸的是，结果都是一样的，无论我尝试什么浏览器…我遗漏了什么?

#

作为对Adrian的回应，我做了一个尽可能简单的样本，以提取出每个人都可以重现的问题。

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(function () {
        $('#test').css({
          background:'red',
          position: 'absolute',
          width: '100px',
          left: ($('body').width() - 100) / 2.0
        });
      });
    </script>
  </head>
  <body>
    <div id="test">
      Lord
    </div>
  </body>
</html>

我还观察到#test在打印文档中的位置取决于打印时浏览器窗口的大小

我实际上是与媒体查询工作，以及在我的实际项目。我试图传达一个非常简单的例子来展示这个问题。

在我看来，这也是有趣的，也是邪恶的根源。即使打印机从打印媒体查询中使用其100px，其执行的javascript返回测试div列表仍然是100%，这在我看来是错误的!!

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(function () {
        $('#test').text($('#test').width());
      });
    </script>
    <style type="text/css">
      #test {
        width: 100%;
        border: 1px solid black;
      }
      @media print {
        #test {
          width: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

编辑:只有js的新解决方案…

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(function () {
        $('#test').css({
          background:'red',
          position: 'absolute',
          width: '100px',
          left: '50%',
          marginLeft: '-50px'
        });
      });
    </script>
  </head>
  <body>
    <div id="test">
      Lord
    </div>
  </body>
</html>
CSS解决方案

在这种情况下，我将使用CSS @media print {}来瞄准打印。

我假设你有理由使用javascript来构建你的CSS，但如果没有，我会建议以完全不同的方式编码。它不需要javascript，也不需要绝对位置。

总之，解决方案如下…

<html>
  <head>
  <style>
  @media print {
    #test {
        left:50% !important;
        margin-left:-50px;
    }
  }
  </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(function () {
        $('#test').css({
          background:'red',
          position: 'absolute',
          width: '100px',
          left: ($('body').width() - 100) / 2.0
        });
      });
    </script>
  </head>
  <body>
    <div id="test">
      Lord
    </div>
  </body>
</html>
相关文章：