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

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

javascript jquery html css printing

Javascript 打印时绝对定位元素的放置不正确,javascript,jquery,html,css,printing,Javascript,Jquery,Html,Css,Printing,我现在面临一个奇怪的问题（很可能我根本没有意识到这里有什么重要的事情）我有以下html代码片段 <div id="test"> Hallo Welt </div> 哈罗贴边以及以下javascript代码片段： <script type="text/javascript"> $(function () { $('#test').offset({ position: 'absolute', width: '100

我现在面临一个奇怪的问题（很可能我根本没有意识到这里有什么重要的事情）

我有以下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>


$（函数（）{
$（“#测试”）。偏移量({
位置：'绝对'，
宽度：“100px”，
左：（$（'body'）.width（）-$（'#test'）.width（））/2.0
})
});

这将使测试div水平居中，这在浏览器中工作得非常好。但是，当我尝试打印这个页面时，元素出现在打印页面的右转角而不是中间。我认为使用像素定位打印元素可能有问题，所以我尝试了其他措施，如em：

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

    $('#test').css({
      left: (($('body').width() - $('#test').width() ) / 24.0) + 'em'
    })
  });
</script>


$（函数（）{
$（'body，#test'）.css（{'font-size'：'12px'）；
$（'#test'）.css({
左：（$（'body'）.width（）-$（'#test'）.width（））/24.0）+'em'
})
});

但不幸的是，无论我使用什么浏览器，结果都是一样的。。。我错过了什么

# 作为对阿德里安的回应，我制作了一个尽可能简单的样本，以提取每个人都可以复制的问题

<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'）.css({
背景：'红色'，
位置：'绝对'，
宽度：“100px”，
左：（$（'body'）.width（）-100）/2.0
});
});
贵族

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

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

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

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

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


$（函数（）{
$（'#test'）.text（$（'#test'）.width（））；
});
#试验{
宽度：100%；
边框：1px纯黑；
}
@媒体印刷品{
#试验{
宽度：100px；
}
}

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

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


$（函数（）{
$（'#test'）.text（$（'#test'）.width（））；
});
#试验{
宽度：100%；
边框：1px纯黑；
}
@媒体印刷品{
#试验{
宽度：100px；
}
}

您的css中是否有一个

@media print

查询导致它执行其他操作？@Adrian我用一个独立的示例补充了我的问题，您可以在您的计算机上尝试；-）我意识到$（“#some div”）.width（）返回浏览器中div宽度的大小，而不是打印页面的宽度。问题就从这里开始。有没有一种方法可以查询“画布”或在打印时返回浏览器或打印页面中div宽度的任何宽度？您的css中是否有一个

@media print

查询导致它执行其他操作？@Adrian I用一个独立的示例补充我的问题，您可以在计算机上尝试；-）我意识到$（“#some div”）.width（）返回浏览器中div宽度的大小，而不是打印页面的宽度。问题就从这里开始。有没有一种方法可以查询“canvas”或在打印时返回浏览器或打印页面中div宽度的任何宽度？我正在开发一个复杂的调度程序组件，需要使用javascript在调度程序中定位事件。问题是，虽然在屏幕上看起来不错，但当试图打印屏幕上看起来不错的同一个调度程序时，相同的事件到处都在浮动。啊，好的，我会用更合适的解决方案编辑我的帖子。我正在开发一个复杂的调度程序组件，我需要用javascript在调度程序中定位事件。问题是，虽然在屏幕上看起来不错，但当试图打印屏幕上看起来不错的调度程序时，相同的事件到处都是。啊，好的，我会用更合适的解决方案编辑我的帖子