Question

我有一个div中有几个div的布局，就像在这张图片Page in Firefox中一样。现在我想让这个页面可打印，对于Chrome和Safari它可以工作，但Firefox在新页面上显示黄色div，而不是在绿色div之后直接打印它。此外，如果红色或灰色div中的内容高于页面（它的文本也包含在div中），则会在页面末尾删除文本。 Print preview in Firefox

我尝试了page-break-before，page-break-after和page-break-inside，但它没有用。

HTML看起来像这样：

<div style="border: 5px solid hotpink">
    <header style="border: 5px solid blue"></header>
    <div style="border: 5px solid green">
        <div style="border: 5px solid purple"></div>
        <div style="border: 5px solid pink"></div>
    </div>
    <div style="border: 5px solid yellow">
        <div style="border: 5px solid red"></div>
        <div style="border: 5px solid grey"></div>
    </div>
</div>

这些div的CSS属性，我添加了width和heigth属性，仅显示图像中的结果。

暗粉红：

box-sizing: border-box;
color: rgb(41, 43, 44);
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;

蓝：

box-sizing: border-box;
color: rgb(41, 43, 44);
display: block;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
height: 156px;
line-height: 24px;
max-width: 100%;
page-break-after: auto;
text-align: center;

绿色：

box-sizing: border-box;
color: rgb(41, 43, 44);
display: flex;
flex-direction: row;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
height: 364px;
justify-content: center;
line-height: 24px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;
page-break-after: auto;
page-break-before: auto;

紫：

box-sizing: border-box;
color: rgb(41, 43, 44);
display: flex;
flex-direction: column;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
height: 364px;
justify-content: center;
line-height: 24px;
margin-right: 30px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;
width: 385px;

粉红色：

box-sizing: border-box;
color: rgb(41, 43, 44);
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
height: 300px;
line-height: 24px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;
width: 400px;

黄色：

box-sizing: border-box;
color: rgb(41, 43, 44);
display: flex;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
justify-content: center;
line-height: 24px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;
page-break-before: auto;

红：

box-sizing: border-box;
color: rgb(41, 43, 44);
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
height: 800px;
line-height: 24px;
margin-top: 20px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 30px;
padding-top: 5px;
width: 440px;

灰色：

box-sizing: border-box;
color: rgb(41, 43, 44);
display: flex;
flex-direction: column;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
height: 800px;
line-height: 24px;
margin-top: 20px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;
padding-left: 30px;
padding-top: 5px;
width: 445px;

灰色div中的div包含文字：

box-sizing: border-box;
color: rgb(41, 43, 44);
display: none;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
outline-color: rgb(41, 43, 44);
outline-style: none;
outline-width: 0px;

任何想法，为什么

Firefox在新页面上呈现黄色div？
灰色div中的文字是否会被截断，如果它不适合一页？

非常感谢！

Firefox打印添加分页符并切断内容

0 个答案: