HTML打印重疊文本

我想在每個dina4容器後分頁並添加page-break命令，但是當我嘗試打印所有內容時都在一個頁面上。

我怎樣才能得到正確的打印輸出？

我需要在每個新頁面上打印輸出像1個dina4容器。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="application-name" content="dtfm"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style type="text/css"> 

    @media print { 
     .dina4 { 
      page-break-after: always; 
     } 
    } 

    @media screen { 
     .dina4 { 
      background-color: #eaFFea; 
      position:relative; 
      top: 0; 
      left: 0; 
      width: 210mm; 
      height: 397mm; 
     } 
    }  

</style> 

</head> 

<body style="">  

<div class="dina4"> 
    <img style="position:absolute;top:15mm; left:100mm" src=""> 
    <div style="position:absolute;top:30mm; left:10mm"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
     penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
     quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
     rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
     Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, 
     enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque 
     rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
     Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, 
     blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero 
     venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet 
     nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
    </div> 
</div> 

<div class="dina4"> 
    <img style="position:absolute;top:15mm; left:100mm" src=""> 
    <div style="position:absolute;top:30mm; left:10mm"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
     penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
     quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
     rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
     Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, 
     enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque 
     rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
     Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, 
     blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero 
     venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet 
     nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
    </div> 
</div> 

<div class="dina4"> 
    <img style="position:absolute;top:15mm; left:100mm" src=""> 
    <div style="position:absolute;top:30mm; left:10mm"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
     penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
     quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
     rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
     Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, 
     enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque 
     rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
     Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, 
     blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero 
     venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet 
     nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
    </div> 
</div> 

</body> 
</html>

來源

2015-11-02 Asharad

歡迎來到Stack Overflow！尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

你有你的HTML的CSS樣式表？這可能對幫助至關重要。 – Persijn

不，我沒有爲這個例子使用任何額外的CSS。 @Paulie_D：我會編輯我的第一篇文章，並嘗試爲此添加最短的代碼示例。謝謝！ – Asharad

你有一些絕對定位的元素。

它們相對於元素定位於屏幕。

當您切換到打印介質時，它們不再位於相對定位的元素內，因此它們相對於文檔定位。

三個class=dina4容器不重疊。這是他們內部的元素。

您需要繼續相對定位這些元素。

來源

2015-11-02 11:11:14 Quentin

將所有職位更改爲相對是解決方案。謝謝 – Asharad

HTML打印重疊文本

回答

相關問題