元素在打印预览或打印在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（最新版本）中打印分页后不浮动

回答

相关问题