元素在打印預覽或打印在Firefox（最新版本）中打印分頁後不浮動

我試圖打印多種文檔格式，但由於某種原因，在Firefox中格式化已超出第一頁。我有浮動元素，它們在第一頁中正確對齊，但在打印預覽中在第二頁上斷開。我在jsfiddle和下面發佈了代碼。如果您將代碼複製到本地計算機上，您可以嘗試一下並查看我的意思。它在Chrome瀏覽器，IE 10,9和safari上運行良好。不幸的是不是Firefox。我想知道這是一個Firefox錯誤，是否有轉機？我可以使用一張桌子，它可以解決這個問題，但我不想。幫助真的很感激。元素在打印預覽或打印在Firefox（最新版本）中打印分頁後不浮動

http://jsfiddle.net/2xpDP/1/

 .hide { display: none; } 
    .left { float: left; } 
    .right { float: right; } 
    .text-center { text-align: center; } 
    .text-left { text-align: left; } 
    .text-right { text-align: right; } 

    .clearfix:before, .clearfix:after { content: ""; display: table; } 
    .clearfix:after { clear: both; } 
    .clearfix { *zoom: 1; } 
    .clear { clear: both; } 
    .align-top { vertical-align: top; } 

    div.page { margin: 0 auto; width: 720px; font-family: Helvetica; font-size: 12px;} 
    .invoice h2 { color: #ccc; } 
    .invoice-header-top { border-bottom: 2px solid #ccc; padding-bottom: 10px; } 
    .invoice-header-top img { width: 300px; height: 125px; } 
    .invoice-header-top .formatType { width: 239px; margin-left: 40px; text-align: left; } 

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

    <div class="page clear clearfix"> 
     <div class="invoice clear clearfix"> 
      <div class="invoice-header-top clear clearfix"> 
       <div class="left"> 
        <img src=" http://placehold.it/350x150"></div> 
       <div class="left formatType"> 
        <h2>INVOICE 
        </h2> 
       </div> 
       <div class="right text-left"> 
        <b>Test Data</b> 
        <br> 
        Test Data<br> 
        Test Data<br> 
        Test Data<br> 
        Test Data</div> 
      </div> 
     </div> 
    </div> 
    <div class="page clearfix clear"> 
     <div class="invoice clearfix clear"> 
      <div class="invoice-header-top clear clearfix"> 
       <div class="left"> 
        <img src=" http://placehold.it/350x150"></div> 
       <div class="left formatType"> 
        <h2>INVOICE 
        </h2> 
       </div> 
       <div class="right text-left company-info"> 
       <b>Test Data</b><br> 
        Test Data<br> 
        Test Data<br> 
        Test Data<br> 
        Test Data</div> 
      </div> 
     </div> 
    </div>

來源

2013-05-01 Zein Sleiman

這是因爲你的僞元素的內容屬性爲空。在這些引號中添加任何內容（除了在空格鍵上點擊），你會發現你的div在FF（打印視圖）中正確對齊。

IE < 8不支持：之前和之後所以如果你想在所有的瀏覽器中使用同樣的打印，我會擺脫他們..祝你好運！

來源

2013-06-14 00:19:48 user1172465

在報價單中添加任何內容都會顯示該值。這不會解決問題，因爲現在你有不需要的內容顯示。 – 2013-06-14 18:46:48

我並不是說它不會搞亂你的設計，但它是你的div在FF打印視圖中不能正確對齊的原因。而且它看起來像你正在研究需要在多重瀏覽器，所以擺脫你的CSS中的僞元素和不同的風格！ – user1172465 2013-06-14 19:08:00

元素在打印預覽或打印在Firefox（最新版本）中打印分頁後不浮動

回答

相關問題