CSS分頁符不適用於所有瀏覽器

我在大多數瀏覽器中除了IE（它甚至可以在IE6中正常工作）和Opera以外，無法正常工作。CSS分頁符不適用於所有瀏覽器

Firefox正確分隔div，但只打印第一頁。

Chrome和Safari僅將分頁符應用於最後一個div。

如何正確地在所有瀏覽器上正常工作？

的HTML：

<div id="leftNav"> 
    <ul> 
    <!--links etc--> 
    </ul> 
</div> 
<div id="mainBody"> 
<div id="container"> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
</div> 
</div>

的DIV與的ID #leftNav和#mainBody被設置爲float:left，因此它們很好地顯示。

我只想打印.pageBreak類，用CSS隱藏#leftNav和其餘的#mainBody。

的CSS：

@media print 
{ 
#leftNav 
{ 
    display:none; 
} 
#mainBody 
{ 
    border:none; 
    margin:none; 
    padding:none; 
} 
}

來源

2011-02-03 Richard Parnaby-King

據我所知，如果您使用「always」值，那麼屬性應該可以在所有主流瀏覽器中使用。你能發佈你的相關CSS和HTML嗎？ – AJJ 2011-02-03 09:40:09

如果你自己解決了這個問題，它不會成爲下面的答案之一，爲了後代的緣故，在這裏發佈它會是一個好主意，而不是在你的問題標題中附加[[solve]]（這並沒有做任何事情）。另外請注意，SitePoint參考（sepehr鏈接到下面）是一個更好的參考CSS和HTML [W3Schools]（http://w3fools.com/） – 2011-03-13 19:35:32

這是我的第一篇文章和習慣的力量讓我改變標題根據許多論壇規則而不是發佈新帖子。我曾就此問題訪問過SitePoint，但這並沒有給我所需的幫助。在這種情況下，W3Schools做到了。 – 2011-03-15 16:13:33

父元素不能浮在它們上面。

對所有父元素設置float:none使得page-break-before:always正常工作。

其他可以破壞分頁符的事情是：在表格中使用分頁符，浮動元素，內嵌塊元素和帶有邊框的塊元素。

來源

2011-03-15 16:12:20

什麼是你的代碼？
這樣？：


<style> 
@media print 
{ 
table {page-break-after:always} 
} 
@media print 
{ 
table {page-break-before:always} 
} 
</style>

來源

2011-02-03 09:42:06

"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values." IE的支持也部分可以實現所需要的是：分頁-前：永遠;這在所有瀏覽器中都是支持的「但是隻打印第一頁」：我不認爲這是css相關的，我想這是在瀏覽器的打印窗口:)

來源

2011-02-03 09:55:32 sepehr

爲了完成和爲了其他人的利益，我只想補充一點，我還必須將overflow: visible添加到body標籤，以便FireFox遵守分頁符，甚至是打印不僅僅是第一頁。

來源

2013-03-22 17:45:45 Vincent

這是爲我修復東西的缺失步驟 – 2014-02-12 15:46:39

+10

爲了更完整一點，`display：flex`似乎也搞亂了事情。 – Ben 2014-11-05 22:59:07

雖然這並沒有明顯記錄，但應該注意，分頁符屬性不能應用於表格元素。如果您有任何元素應用了display: table;或display:table-cell;（在clearfix類下的許多模板中都是常見的），則包含的元素將忽略分頁規則。只要取消你的打印樣式表中的規則，你應該沒問題（當然，浮游物也被移除了！）。

這是一個如何爲流行的clearfix問題做到這一點的例子。

.clearfix:before, .clearfix:after{ 
    display: block!important; 
}

編輯：我忘了補充一點，我已經運行到這個其他的地方是當模板聲明的整個頁面（通常稱爲主或主包裝）與display:inline-block;

如果截面內一個內聯塊，它不會工作，所以要保持你的眼睛。改變或覆蓋display:inline-block;與display:block應該工作。

希望這會有所幫助！

〜techdude

來源

2013-08-21 15:46:53 techdude

我導致此不工作的股利印刷了position: absolute;。

來源

2013-12-17 17:00:16

我發現Twitter Bootstrap類爲網頁添加了一堆東西，這使得頁面中斷很難工作。 Firefox正常工作，但我必須遵循各種建議才能在Chrome中運行，最後是IE（11）。

我按照這裏和其他地方的建議。我發現的「我發現」的唯一財產是「箱子大小」。 Bootstrap可以將此屬性設置爲「box-sizing：border-box」，這會破壞IE。一個IE瀏覽器友好的設置是「框大小：內容框」。由Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752提出的關於「帶有邊界的塊元素」的警告引導了我。

它看起來像是一場軍備競賽，發現可能會破壞分頁符的下一個屬性。

這是爲我工作的設置（Chrome，FF，IE 11）。基本上，它試圖覆蓋打印頁面上所有div上的所有有問題的設置。當然，這也可能會破壞你的格式，這意味着你必須找到另一種方式來設置頁面。

@media print { 

    div { float: none !important; position: static !important; display: inline; 
      box-sizing: content-box !important; 
    } 

}

來源

2015-02-10 21:00:14 Yuri

有一個解決方案，如果父母有浮動。對於應用了分頁符的元素，使元素溢出：隱藏。就這樣。它爲我工作。

<div style='float:left'> 

<p style='overflow:hidden;page-break-before:always;'></p> 

</div>

來源

2016-04-28 18:52:07

CSS分頁符不適用於所有瀏覽器

回答

相關問題