Графика для предварительного просмотра печати в скрытой части печати в хроме новая версия

Я показал несколько скриншотов, которые показывают проблему...

Проблема:

Я пытаюсь напечатать эту страницу только с таблицей и, как показано на рисунке с открытой боковой панелью, я установил эту боковую панель в print-hidden, и она работала до версии Google Chrome 46.0.2490.71, но после следующего обновления в @media print css margin не работает.

Страница боковой панели:

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

Страница боковой страницы Print Priview:

Без боковой панели Страница:

Без боковой страницы Печать страницы Priview:

Я не могу понять, почему новая версия хром занимает print-hidden div margin...!!

Важно, что он не работает в последнем обновлении Chrome, но в остальном это было хорошо.

Если кто-то определил проблему с печатью в последнем обновлении хром, сообщите мне, у кого есть решение.

Вы можете спросить, есть ли у вас какие-либо вопросы, чтобы понять мою проблему.

Пробовал:

Я пытаюсь дать отрицательное левое поле, но в этом случае все другие предварительные просмотры браузера не являются правильными

Проблема в GitHub:

Проблема в форуме Google Chrome:

JsFiddle:

В JsFiddle я использовал свойство css margin-left, но он не работает в последней версии Chrome после 47, он отлично работал в старой версии до Google Chrome 46.0.2490.71, но в следующем обновлении это большой проблема в другом браузере работает как обычно очень гладко...

Ответы

Ответ 1

сначала проверьте скрипку https://jsfiddle.net/ceh185bw/11/

Я сделал 2 вещи,

1- поместить печать в боту

2- переместить марку для контейнера

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
    border: 3px solid;
}
#main-container {
    margin-left: 200px!important;
    border: 3px solid;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{
    display:none !important;
}
#main-container {
margin-left: 0px!important;
border:1px solid;
border: 3px solid;
}
#main-container {
    margin-left: 0px!important;
}
}

Ответ 2

В css есть 2 проблемы.

1) Печать в СМИ должна быть завершена 2) по ошибке вы добавили запятую в код после отображения: none.

@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important},
#main-container {
    margin-left: 0px!important;
}
}

Правильный CSS:

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
}
#main-container {
    margin-left: 200px!important;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important}
#main-container {
    margin-left: 0px!important;
}
}

Ответ 3

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

Если это так, то решение можно найти здесь: https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/

Короче: отключить все переходы в таблице стилей печати (media = "print" ) для всех элементов, применяя

* {
  -webkit-transition: none !important;
  transition: none !important;
}

... или заверните его в "@media print" в обычной таблице стилей.

В вашем стиле печати вы устанавливаете ширину боковой панели в 0px, но Chrome только начал анимацию ширины (из-за перехода), когда она принимает снимок печати, следовательно: маржа, которая все еще видна!