html - 在 Edge 和 IE 上打印时 HTML 上的不同元素顺序

Question

我正在使用 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 上方的顶部？

Answer 1

了解应用了哪些样式会有所帮助。我猜它是具有显示属性的东西，因为我知道它在打印时并不总是很好。

如果你愿意，你可以叫我懒惰(我经常很懒惰)，但我的解决方案是使用自定义打印 css 将它们设置为全宽，因为它不会改变布局的语义。

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