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

在列印的時候我們經常使用CSS

page-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

等樣式。