打印時絕對定位元素的位置不正確

我目前正面臨一個奇怪的問題（很可能，我根本沒有意識到這裏有重要的東西）。打印時絕對定位元素的位置不正確

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

但不幸的是，結果都是一樣的，不管是什麼瀏覽器我嘗試.. 。我在這裏錯過了什麼？

＃

爲了迴應阿德里安，我做了一個儘可能簡單的示例，以便爲每個人提取可重現的問題。

<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在打印文檔中的位置取決於打印時瀏覽器窗口的大小。

來源

2015-10-18 Silverdust

是否有可能你有一個'@ media print'查詢在你的css導致它做別的事情？ – Adrian

@Adrian我補充我的問題有一個獨立的樣本，你可以嘗試在你的compuer ;-) – Silverdust

我意識到，$（「＃一些-DIV」）。寬度（）返回在瀏覽器中的div寬度的大小，而不是打印頁面內的寬度。這就是問題開始的地方。有沒有辦法在打印時查詢「畫布」或任何可以返回瀏覽器或打印頁面中div的寬度的寬度？ – Silverdust

編輯：只有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>

來源

2015-10-19 09:58:10 Adrian

我正在開發一個複雜的調度程序組件，我需要使用javascript將調度程序中的事件定位。問題在於，儘管在屏幕上看起來不錯，但在嘗試打印屏幕上看起來不錯的同一個調度程序時，同樣的事件在各處浮動。 – Silverdust

好的，虐待編輯我的帖子更合適的解決方案 – Adrian

我其實跟媒體查詢，以及在我真正的項目。我試圖傳達一個非常簡單的樣本作爲問題的展示。

這在我看來也很有趣，也是邪惡的根源。即使打印機從打印介質查詢中使用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>

來源

2015-10-19 10:11:59 Silverdust

打印時絕對定位元素的位置不正確

回答

相關問題