Различный порядок элементов в HTML при печати в Edge и IE - PullRequest
Новая
       37

Различный порядок элементов в HTML при печати в Edge и IE

0 голосов
/ 11 октября 2019

Я оформляю страницу для печати с помощью CSS. Страница печатается именно так, как я хочу, в Chrome и FireFox. Однако Edge и IE отображают элементы в неправильном порядке.

HTML (обратите внимание на порядок): 

<tbody id="part-01">content 1</tbody>
<tbody id="part-02">content 2</tbody>
<div id="insQt-disclaimers">content 3</div>

CSS: 

#part-01 {width:100%;}
#part-02{width:40%; float:right;}
#insQt-disclaimers {width: 50%; float:left; display:block;}

Вот скриншотпредварительного просмотра печати в Chrome и FireFox (отображается правильно): https://gyazo.com/f5298fe370a9123f5c24325a63de7791

Вот снимок экрана предварительного просмотра печати в Edge и Internet Explorer (отображается неправильно) https://gyazo.com/fcedf957bb69d02574a7198bc56a055a

Как вы можетевидите, содержание 2 неуместно. Почему содержимое 2 перемещается вверх над содержимым 1?

1 Ответ

4 голосов
/ 12 октября 2019

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

Вы можете называть меня ленивым, если хотите (я часто ленивый), НО мое решение состояло бы в том, чтобы установить их оба на полную ширину с помощью пользовательской печати CSS, поскольку это не изменило бы семантику макета.

https://www.sitepoint.com/css-printer-friendly-pages/

...