Почему элементы html с (@media print display: none;) отображаются при печати в виде пробелов и как удалить пробел? - PullRequest
Новая
       42

Почему элементы html с (@media print display: none;) отображаются при печати в виде пробелов и как удалить пробел?

0 голосов
/ 07 апреля 2019

Моя проблема - это нежелательные пробелы при печати. ​​

Я видел много постов, в которых спрашивалось, как скрыть или показать элементы при печати, но я не видел ни одной относительно этой проблемы пробелов.

У меня есть два элемента div, каждый из которых содержит кнопки. Я настроил элементы div и кнопки с помощью внешней таблицы стилей с помощью атрибута css display: none ;. 

<link rel="stylesheet" href="css/print.css"type="text/css" media="print"/>

Когда я щелкаю правой кнопкой мыши веб-страницу и выбираю печать, в окне предварительного просмотра не отображаются кнопки, как ожидалось. Однако пространство, занимаемое элементами div и кнопками, отображается в виде пробела в окне предварительного просмотра и печатается как пробел, если я на самом деле печатаю веб-страницу.

Я проверил элементы тезиса для свойств верхнего и нижнего полей, и они вычисляются без верхнего или нижнего поля в Инспекторе браузера Chrome. То же самое касается элементов непосредственно до и после целевых элементов div. Я попытался нацелить div и кнопки с полем css: 0; все тот же результат. Здесь также задействованы теги <br> break. Я также нацелился на них: нет; Это, кажется, удалило небольшое количество пустого пространства. Я могу предоставить снимки экрана при необходимости. Я также могу предоставить размеры пустого пространства и элементов при необходимости. Есть ли способ устранить этот пробел @ media print с помощью решения css, или мне нужно вызвать функцию javascript для изменения innerHTML, полностью удаляя div при печати?

HTML: 

<div class="row" id="sign_up_c">
    <p class="lead  text-center">Please sign me up for the 6 day Carnival Cruise.
        <br>
        Please fill out and print this sign-up form for<u>each</u>person.
    </p>
    <br>
</div>
<div class="row text-center noPrint">
    <button type="button" onclick="fillTableFunction(); return false, printContent('table_sign_up_c')" class="btn btn-primary"><span><i class="glyphicon glyphicon-print"></i></span>&nbsp;&nbsp;Print form</button>
</div>
<br>
<div class="row text-center noPrint">
    <script>$(function () {  $('[data-toggle="popover"]').popover()})</script>
    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="left" title="Your security & privacy are important to us." 
        data-content="We have made efforts to ensure your personal information is secure. We only share your information where it is required by law. If you are viewing this on a public computer please be sure to close the browser after completing & printing the form.">
        Security & Privacy
    </button>
</div>

CSS: 

@media print{

    body, html {
    margin-top:0px;
    padding-top:0px;
    }

    .print-only { 
        visibility: visible;
    }

    button.btn.btn-primary {
        display: none;
        margin: 0;
    }

    button.btn.btn-lg.btn-danger {
        display: none;
        margin: 0;
    }

    .btn-danger { 
        display:none;
    }

    br{
        display: none;
    }

    .noPrint {
        display: none !important;
        margin: 0 !important;
    }

    #itinerary { 
    transform: scale(.6);
    }
    .myform { 
    transform: scale(.6);
    }
}


@media screen {
    .print-only {visibility: hidden;}
}
...