Блог

Главная - Вопросы по программированию - Что происходит с моей CSS-печатью?

Что происходит с моей CSS-печатью?

#html #css #asp.net

#HTML #css #asp.net

Вопрос:

Вот мой CSS-код:

  @media print
        {
            body *
            {
                visibility:hidden;
            }
            #printable *
            {
                visibility:visible;
            }
            #printable
            {
                margin:0px;
                color : #000000;
                background : #ffffff;
                filter: Gray();
                filter: url('#grayscale'); 
                -webkit-filter: grayscale(100%); 
                filter: grayscale(100%);
                top:0px;
                left:0px;
            }

            @page
            {
                size:auto;
                margin:0mm;
            }

        }

У меня такой div

 <div class="row" id="printable">

   ...

</div>

Когда я печатаю в Интернете, в верхней части слишком много пробелов, а основное содержимое начинается почти с половины страницы. Что-то не так с моим css?

Извините, если я не могу показать изображение..

Комментарии:

1. потому что вы использовали visibility:hidden . Это просто делает элементы невидимыми, но они занимают их исходное пространство. Вот почему там есть пробелы

2. итак, что мне делать. если я display:none вообще не использую отображение

3. вы можете использовать display:none for body * , но затем for #printable provide display:block и for #printable * вы можете указать display значение свойства как требуемое, встроенное или блочное и т. Д. вам нужно будет уточнить это

4. Я уже это делаю, и все равно ничего не происходит.. если я использую display:none и использую display:block или display:inline по #printable -прежнему не работает. Спасибо, приятель, я все равно продолжу пытаться с этим.

5. #printable не должно находиться ни под каким скрытым контейнером, а элементы внутри #printable не должны быть скрыты. Это решит проблему. Попробуйте применить эти стили на самой веб-странице. Я только что сделал это здесь, на сайте stackoverflow, и он работает нормально

Ответ №1:

Ошибка! #printable по-прежнему имеет видимость: скрытый, измените код на:

  @media print
        {
            body *
            {
                visibility:hidden;
            }
            #printable *
            {
                visibility:visible;
            }
            #printable
            {
                margin:0px;
                color : #000000;
                background : #ffffff;
                filter: Gray();
                filter: url('#grayscale'); 
                -webkit-filter: grayscale(100%); 
                filter: grayscale(100%);
                top:0px;
                left:0px;
    visibility:visible;
            }

            @page
            {
                size:auto;
                margin:0mm;
            }

        }