風格「page-break-after」適用於Firefox，但Chrome或Internet Explorer都不適用

我們有這個頁面，客戶用它將一些數據打印到紙上。它循環遍歷MVC模型列表，並且每個新迭代都應該打印在新頁面上。風格「page-break-after」適用於Firefox，但Chrome或Internet Explorer都不適用

在CSHTML我已經建立了這個（簡體）：

@foreach (var header in Model.ReportHeaders) 
{ 
    <div style="page-break-after:always"> 
     <div> 
      <img src="Logo-image-url" /> 
      <h2>Misc Logo stuff</h2> 
     </div> 

     <div>Report header information</div> 

     <div> 
      <table> 
       <thead> 
        <th>Column headers</th> 
        <th>Column headers</th> 
        <th>Column headers</th> 
       </thead> 
       <tbody> 
        @foreach (var details in header.ReportDetails) 
        { 
         <td>All the data here</td> 
         <td>All the data here</td> 
         <td>All the data here</td> 
        } 
       </tbody> 
      </table> 
     </div> 
    </div> 
}

但不知何故，但是我試着重新造型分頁，之後既不Chrome或IE想開始新的一頁上打印時它。我錯誤地使用它，或者它爲什麼不按預期工作？

來源

2017-07-06 Hofftari

你是什麼意思的新頁面？它是新的Div或Container還是單獨的頁面？ –

你把你的div放在哪裏？是否在其中之一：內部表格，浮動元素，內聯塊元素和具有邊界的塊元素？請參閱此問題答案中的參考https://stackoverflow.com/q/4884380/6638533 – samAlvin

當通過瀏覽器打印時，我想要一個完整的新物理頁面。這個頁面實際上是通過ajax帖子在索引頁面的另一個div中調用的，但是這個div不在任何其他元素內，而是直接在該Index.cshtml文件的末尾。儘管我必須檢查並查看是否有浮點樣式來使用我們使用的任何類屬性。 – Hofftari

這整個頁面的確如同samAlvin對我的問題所做的評論，它繼承了一個佈局頁面，其中帶有「page」類的div和帶有ID「main」的另一個div的樣式爲float：left。我暫時在打印功能之前刪除了這兩個div上的浮動樣式，然後再重新添加它。該頁面在那個毫秒內有一個小的連接，但至少現在的打印在所有瀏覽器中都能正常工作。感謝您的快速幫助！

來源

2017-07-06 08:21:27 Hofftari

風格「page-break-after」適用於Firefox，但Chrome或Internet Explorer都不適用

回答

相關問題