3

ここや他の場所で尋ねられた多くの質問を読みましたが、改ページが機能しないように見える理由がわかりません。次のようなテスト HTML ページを作成しました。

<html>
    <head>
        <style type="text/css">
            @media all
            {
                .page-break { }
            }

            @media print
            {
                div {page-break-after:always; }
            }
        </style>
    </head>
    <body>
        <div class="page-break">
            1content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
        </div>
        <div class="page-break">
            2content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
            content content content content content content content content content content content content 
        </div>
...
</body>
</html>

私はこれらのdivを9つ持っています。シンプルですよね？これは問題なく機能します（期待どおり、各 div を個別のページに配置します）。次に、IE と FF で機能しないものについて説明します。ここでの私の目標は、これらの 9 つの div のいずれかで壊れない単純な html ドキュメントを作成することです。div スタイルを page-break-inside:avoid に変更すると、IE または FF ではまったく効果がありません。page-break-after:avoid または page-break-after:auto を試しても、単純な html ドキュメントには何の効果もないようです。私は何かが欠けていますか？Explorer と FireFox の両方で動作するソリューションを持っている人はいますか?

4

1 に答える 1

1

残念ながら、Firefox は「page-break-inside」をサポートしていないため、「page-break-before: always」を使用することをお勧めします。これは IE と Firefox でサポートされており、各 DIV がページ全体を使用できるようになります。また、最初の DIV にはクラスを適用しません。これは、不要な中断を強制するからです。マークアップは次のとおりです。

<html>
    <head>
        <style type="text/css">
            @media print
            {
                .page-break { page-break-before: always; }
            }
        </style>
    </head>
    <body>
        <div>
            1content content content content content content content content content content content content 
            content content content content content content content content content content content content
        </div>
        <div class="page-break">
            2content content content content content content content content content content content content 
            content content content content content content content content content content content content
        </div>
...
</body>
</html>
于 2010-06-29T15:30:08.043 に答える