2017-02-09 1 views
1

Я нашел очень странное поведение в браузере Chrome (моя текущая версия - 54.0.2840.59); когда я пытаюсь распечатать предварительный просмотр html-страницы, которую я разработал, она обрезает содержимое страницы, просматривая меньше контента, чем я. Все содержимое повторяется, поэтому нет возможности, чтобы какой-то конкретный элемент вызывал эту проблему. С другой стороны, когда я печатаю предварительный просмотр одной и той же страницы в других браузерах, таких как (IE11, Edge, Firefox, Safari), я вижу весь контент! Вот мой скриншот из Chrome в режиме предварительного просмотра печати: print preview truncates the rest of the pagechrome усекает содержимое страницы, когда в предварительном просмотре просмотра в то время как браузеры отдыха не

На изображении вы можете ясно видеть конец свитка в окне предварительного просмотра, но есть еще много контента ... отметить также, что я испытал это в Windows 10, iOs и даже в режиме инкогнито, если аддон сделает это.

ответ

1

Я только что нашел решение. Сетка, которую я создал, была с бутстрапом. Существует случай, о том, что здесь: https://github.com/twbs/bootstrap/issues/12078

Я изменил всю сетку, чтобы отобразить таблицу с Importants, (который решил мой случай!). Хотя в сообществе они изменили систему сетки бутстрапов, чтобы соответствовать ширине печати, что является лучшим решением.

В любом случае проблема заключалась в том, что хром использует размер бутстрапа XS; следовательно, он просчитал высоту страницы в моем случае.

+0

Одиночная проблема. Что вы имеете в виду, вы изменили таблицу с! У вас был пользовательский css, который был неправильным? – Programatic

+0

Chrome считает, что область просмотра меньше 768 пикселей. Так что вам действительно нужно сделать, это перестроить всю сетку, как если бы она была col-xs. В моем случае я создал свою сетку как таблицу и таблицы, вместо того, чтобы плавать. Но, конечно, вы можете расширять col-xs- * до ваших элементов, а не использовать таблицу. Я использовал важные правила, потому что селекторы были сильнее, и мне нужны были мгновенные результаты, но это не имеет значения. –

0

Еще более правильный способ решения этой проблемы заключается в использовании следующих правил: Sass

@media only print{ 
    // create grid for .col-md to work without media query 
    @include float-grid-columns(md); 
    @include loop-grid-columns($grid-columns, md, width); 
    @include loop-grid-columns($grid-columns, md, pull); 
    @include loop-grid-columns($grid-columns, md, push); 
    @include loop-grid-columns($grid-columns, md, offset); 
} 

С теми правилами, которые делают самонастройки МЕД столбцы следует рассматривать как нормальные в печати.

Смежные вопросы