Ширина печати отличается на хром и сафари

0

Я использую средство просмотра отчетов в модальном представлении. это некоторые из стилей печати:

@page{
   margin: 5mm;
}

body{
   visibility: hidden;
}
.modal-report{
   width: 100%;
   height: 100%;
   margin: 0;
}
#report-view-container-id, #report-view-container-id *{
   visibility: visible;
}
#report-view-container-id{
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left: 0;
}

.report-view-container-letter
{
   max-width: 23.59cm;
   max-height: 27.94cm;
   min-width: 23.59cm;
   min-height: 27.94cm;
   padding-right: 15px; 
   padding-left: 15px;
}

На firefox, когда я пытаюсь напечатать, отлично работает ширина, но на Google Chrome и сафари - около 60%. Вопрос уже задан 6 лет назад, но ничего не говорят.

На firefox: Изображение 174551

На Google Chrome и сафари: Изображение 174551

Это немного plnkr, пытающийся воссоздать мой случай

  • 0
    Пожалуйста, предоставьте соответствующий HTML и вырежьте любой CSS, который не имеет значения для вопроса (например, нам не нужна visibility: visible потому что ничего не было установлено на visibility: hidden ). Если вы используете «фрагмент» (значок < > если вы нажмете «изменить», мы сможем увидеть демонстрационный результат!
Теги:
google-chrome
angular-ui-bootstrap

1 ответ

0

Это еще не ответ, но комментарий не позволит мне включить форматирование, в котором я нуждаюсь...

@page не является допустимым медиа-запросом и будет просто проигнорирован. Для стилей печати это должно быть @media print. margin не применяется ни к чему: вы хотите что-то вроде

@media print {
    mytargetelement {
        margin: 5mm
    }
}

Это вообще помогает вашей проблеме?

  • 0
    не работает: /
  • 0
    Это единственное предложение, которое я могу сделать, пока вы не отредактируете свой вопрос, чтобы добавить полный (но минимальный) пример :) stackoverflow.com/help/mcve

Ещё вопросы

Сообщество Overcoder
Наверх
Меню