Распечатать CSS без учета явной высоты / переполнения: нет? - PullRequest
Новая
       4

Распечатать CSS без учета явной высоты / переполнения: нет?

3 голосов
/ 02 августа 2011

Я написал отдельную таблицу стилей media = "print" для своей страницы - специально для изменения размера div.В CSS для печати я дал div явную высоту (в единицах 'pt') и другой размер шрифта (также в 'pt').Я также указал, что div ВСЕГДА имеет переполнение: скрытый (Я ХОЧУ, чтобы лишний текст был обрезан).

Когда я печатаю страницу, div, кажется, не соответствует явной высоте - он просторастягивает div (несмотря на переполнение: скрыто);Так как это макет печати, у меня чертовски много времени на его устранение, поскольку я не могу использовать инструменты IE Developer для отслеживания CSS / DOM.

Кстати, я использую IE8 со страницейв режиме совместимости.Я нахожусь в корпоративной локальной сети, где все пользователи ГАРАНТИРУЮТ иметь IE7 или IE8, поэтому мне нужно, чтобы он работал только в них;

HTML: 

<div class="left" style="display: none;">
    <h1 class="corrected">Company Info</h1>
    <div class="box" id="overview_html"></div>
</div>

<div class="right" style="display: none;">
    <h1 class="corrected">Notes</h1>
    <div class="box" id="notes_html"></div>
</div>

Печать CSS:

#notes_html, #overview_html { height: 200pt !important; overflow: hidden; font-size: 12pt; }

Снимки экрана (сначала браузер, затем IE "Предварительный просмотр печати"):

Browser screenshot

Print-preview

Любые идеи о том, что происходитна?Есть ли какие-то "ошибки" для печати макета, где вы не можете использовать переполнение: скрытый или установить явную высоту?

1 Ответ

3 голосов
/ 02 августа 2011

примечание : несколько слепой ответ, поскольку я не вижу ваши фотографии .

Попробуйте использовать max-height вместо height. Это сработало для меня.

редактировать

Проблема в режиме совместимости : он ведет себя как IE6: высота обрабатывается как минимальная высота (т. Е. «Может увеличиться»).

Полный тестовый пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>test</title>
    <style type="text/css" media="screen">
        div {
            border: 1px solid red; overflow:hidden;
            float:left;
            width:100%;
            height:50pt
        }
    </style>
    <style type="text/css" media="print">
        div {
            border: 1px solid blue; overflow:hidden;
            float:left;
            width:100%;
            height: 50pt
        }
    </style>
</head>
<body>
        <div>
            test<br />test<br />test<br />test<br />test<br />test<br />test<br />
            test<br />test<br />test<br />test<br />test<br />test<br />test<br />
        </div>
</body></html>
...