Question

我目前面临一个奇怪的问题（好吧，我很可能根本不知道这里有什么重要的事情。）

我有以下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的位置取决于打印时浏览器窗口的大小。

Answer 1

编辑：仅使用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>

Answer 2

我实际上在我的真实项目中处理媒体查询。我试图传达一个非常简单的样本作为问题的展示。

在我看来，这也是有趣的，也是邪恶的根源。即使打印机使用来自打印介质查询的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>

打印

2 个答案: