разрыв страницы с IE и FF не работает должным образом - PullRequest
Новая
       11

разрыв страницы с IE и FF не работает должным образом

3 голосов
/ 29 июня 2010

Я прочитал много вопросов, заданных здесь и в других местах, и меня смущает, почему разрывы страниц, похоже, не работают для меня.Я создал тестовую 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 на отдельной странице, как и ожидалось).Теперь о вещах, которые не работают для IE и FF. Моя цель здесь состоит в том, чтобы создать простой HTML-документ, который никогда не разрывается внутри одного из этих 9 элементов div. Если я изменю свой стиль div на разделение страницы: избегайте, чтобы он не имел абсолютно никакого эффекта в IE или FF,Если я попробую page-break-after: избежать или page-break-after: auto, то это не окажет никакого влияния на простой HTML-документ.Я что-то пропустил.У кого-нибудь есть решение, которое будет работать как в Explorer, так и в FireFox?

1 Ответ

1 голос
/ 29 июня 2010

К сожалению, Firefox не поддерживает «разрыв страницы», поэтому лучше всего использовать «разрыв страницы до: всегда».Это поддерживается 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...