1. 程式人生 > >page-break在IE上列印不分頁問題

page-break在IE上列印不分頁問題

在列印的時候我們經常使用CSSpage-break-after: always;來分頁,如下。最近在做列印分頁的時候發現IE11和其他主流的瀏覽器有一點細微的差別。

.page-break {
    page-break-after: always;
}

IE列印時,在浮動的元素上新增分頁的樣式,列印結果將不會分頁
具體HTML程式碼如下:

<div style="float: left;"> 
    <p class="page-break">這個是第一頁的內容</p>
    <p>這個是第二頁的內容</p>
</div>

在谷歌瀏覽器上是正常分頁顯示的,在IE11中並沒有分頁,顯示如下:
在這裡插入圖片描述
由於這種不一致的特性,我們要儘量避免page-break和浮動混用在一起。特別需要注意的是,有的庫中的一些樣式是帶有浮動的,也應該避免,比如bootstrap中的col-lg-12等樣式。