Элементы не плавают после разрыва страницы в предварительном просмотре или печати в Firefox (последняя версия)

Question

Я пытаюсь распечатать несколько форматов документов, но по какой-то причине в Firefox формат перепутан за пределы первой страницы. У меня есть плавающие элементы, и они выравниваются правильно на первой странице, но перерыв на второй странице в предварительном просмотре. Я отправил код в jsfiddle и под ним. Если вы скопируете код на свой локальный компьютер, вы можете попробовать его и посмотреть, что я имею в виду. Он отлично работает на Chrome, IE 10, 9 и сафари. К сожалению, не 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> 

Answer 1

Это потому, что свойство содержание ваших псевдо элементов пусто. Добавьте что-нибудь в эти кавычки (помимо попадания на пробел), и вы увидите, что ваши divs правильно выравниваются в FF (вид печати).

IE < 8 не поддерживает: до и: после этого, если вы хотите сделать эту печать одинаково во всех браузерах, я бы избавился от em .. Удачи!