Почему Safari продолжает добавлять все больше полей после каждого разрыва страницы CSS?

Я пытаюсь напечатать несколько отдельных блоков на одной HTML-странице и разрываю границу страницы с помощью «page-break-after: always». Однако к каждой напечатанной странице применяется немного большее поле верхнего колонтитула. У меня есть следующий тестовый код, который печатает только «Hello World», а на странице 145 это четверть страницы.

<!DOCTYPE html>
<head>
<title>Printing Issue</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.break {
page-break-after:always;
}
</style>
</head>
<body>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
<div class="break"></div>
Hello World
</body>
</html>

Загрузите в Safari и используйте команду печати, а затем «Предварительный просмотр» (откройте как PDF). Отображение боковой панели эскизов PDF в режиме предварительного просмотра и прокрутка к последним страницам показывает, что «Hello World» переместился вниз по странице. Проблема возникает точно так же при печати.

Это проблема только браузеров на основе WebKit. Мы очень ценим любую информацию об устранении этой проблемы в Safari.

Обновление. Это была ошибка в WebKit, которая теперь исправлена ​​в последней ночной сборке «r103857». Спасибо за руководство.


css safari printing webkit fixed
person Conor    schedule 30.12.2011    source источник
comment
я бы сообщил об этом как об ошибке в webkit.   -  person Daniel A. White    schedule 30.12.2011
comment
Попробуйте использовать сброс CSS. Или просмотрите Google для сброса, который более специфичен для вашей проблемы.   -  person Kris Hollenbeck    schedule 30.12.2011
comment
У меня такого вообще не бывает. Safari 5.1.2.   -  person Josh Smith    schedule 30.12.2011
comment
@Kris Hollenbeck: Как может помочь сброс CSS?   -  person BoltClock    schedule 30.12.2011
comment
@BoltClock Это поможет обеспечить одинаковую визуализацию CSS во всех браузерах. То же самое предложил Джош Смит.   -  person Kris Hollenbeck    schedule 31.12.2011
comment
Всем спасибо, ряд различных нормализации / сброса CSS не решает проблему. @Josh Smith Не могли бы вы прислать мне снимок экрана со страницей 145, чтобы подтвердить, что ошибка не возникает в вашей системе. Я протестировал его на 5 разных компьютерах (включая сборку Safari 5.1.2: 7534.52.7) и получил стабильную ошибку. Я собирался отправить ошибку в WebKit, как предложил Даниэль, но если вы подтвердите обратное, не могли бы вы сообщить мне более подробную информацию о вашей системе, это поможет при отправке ошибки в WebKit. Вы загружаете ночную сборку WebKit?   -  person Conor    schedule 31.12.2011
comment
Эта ошибка теперь исправляется в WebKit каждую ночь. Всем спасибо за советы.   -  person Conor    schedule 20.01.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вам следует нормализовать свой CSS, чтобы избежать таких проблем.

person Josh Smith    schedule 30.12.2011