2

複数のドキュメント形式を印刷しようとしていますが、Firefox で何らかの理由で最初のページを超えて形式が乱れています。フローティング要素があり、最初のページでは正しく配置されますが、印刷プレビューで 2 ページ目で途切れます。コードを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>
4

1 に答える 1

0

これは、疑似要素の content プロパティが空であるためです。これらの引用符に何かを追加すると (スペース バーを押す以外に)、div が FF (印刷ビュー) で適切に配置されていることがわかります。

IE<8 は :before と :after をサポートしていないので、すべてのブラウザで同じように出力したい場合は、em を削除します..頑張ってください!

于 2013-06-14T00:19:48.977 に答える