HTML/CSS 打印布局问题 - 在 chrome 上添加额外的页面 - HTML/CSS Print Layout issue

我有一个HTML页面，我正在尝试修复所有浏览器上的打印布局问题。这是代码

<style type="text/css">
@media print {
* {
overflow: visible !important;
}    
body {
height: auto;
color: #000;
background: #fff!important; 
}  
nav, aside {
display: none;
} 
a-page {
float: left;
margin: 0;
box-shadow: 0;   
page-break-inside: avoid;
widows: 3;
orphans: 3;
} 
#header, #menu, #sidebar{ height:1px; display:none;}
@page {
size: A4 portrait;
}

ul.grid-container {
margin: 0;
padding: 0;
}
}
body {
background: rgb(204,204,204); 
}

a-page {
width: 21cm;
height: 29.7cm; 
background: white;
display: block;
margin: 1cm auto;  
}

ul.grid-container {
border:0px dashed black; 
width:100%; 
vertical-align: middle; 
text-align: center; 
table-layout: fixed;
list-style-type: none;
padding-left: 0;
margin-top: 0
}
ul.grid-container .container {
border: 1px dashed black;
width: 49.7%;
height: 100%;
float: left;
position: relative
}
p.fcards {
padding-left:10px; 
padding-right:10px;  
text-align:center;
}
p.fc_sm {
padding-left:10px; 
padding-right:10px; 
text-align:center;
font-size: 1em;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
p.fc_md {
padding-left:10px; 
padding-right:10px;  
text-align:center;
font-size: 1.5em;
}
p.fc_lg {
padding-left:10px; 
padding-right:10px;  
text-align:center;
font-size: 2em;
}
.size_4x2 .grid-container li{
height:7.4cm;
}
</style>
<body class="size_4x2">
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div>                  </li>
</ul>
</a-page>


</body>

https://jsfiddle.net/lajin/myf8nfpk/

当我看到打印布局时

在Chrome上，它会在每个页面之前添加一个额外的页面
在FF上，页面加载正常，但第一页上顶部的边距不同
IE有巨大的底部边距，因为它缩小以适应屏幕

关于如何解决打印页面问题的任何建议？

提前感谢您的帮助。

您的大多数问题都是由于边距、填充和边框的使用效率低下造成的。我通过首先通过删除从未调用的类定义并删除我知道或怀疑没有影响的行来剥离不相关的代码来解决此问题，在每次删除后测试运行新代码以确保对页面的性能没有影响。

我的下一步是将以下 CSS 代码添加到 CSS 组件的开头......

*
{
box-sizing : border-box;
margin     : 0;
padding    : 0;
}

默认情况下，边界不包括在区域的已定义尺寸中，而是添加到区域的外部。通过在最高级别使用box-sizing : border-box;，您可以强制将每个区域的边界包含在该区域中。

边距和填充的默认行为也可能是许多隐藏悲伤的原因。通过将它们设置为最高级别0，您可以忽略它们，直到您知道特定class或id定义将需要它们，此时您将按照正常方式定义它们。

接下来，我换了行——

margin: 1cm auto;

自-

margin : auto;

由于您的文件当前已编码，因此其效果是使其看起来好像A4纸张周围有大量填充，在屏幕上看起来不错，但它仍然包含在打印区域中，这可能会导致打印时布局不佳。有几种方法可以解决此问题。我建议将a-page视为A4区域，并在该div内增加第二个div，例如a-page-text-area将放置实际文本。目前，我正在使用margin : auto;来保持页面水平居中，并使用缓冲区区域垂直分隔页面。

最后，使用类定义ul.grid-container .container和ul.grid-container，您依赖于一个定义来覆盖另一个定义的属性。在更复杂的程序中，这可能会导致在某些情况下发生错误。作为良好做法，我建议将所有共享属性定义放在一个通用class或class中，将所有特殊的属性定义放在一个id中。请注意，打开div代码(如class = "container-grid container-all")可用于将多个类的属性应用于该div。

我用来解决您的问题的完整代码如下...

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name    = "viewport"
content = "width=device-width, initial-scale=1.0"
>
<style type = "text/css">
*
{
box-sizing : border-box;
margin     : 0;
padding    : 0;
}
@media print
{
@page
{
size : A4 portrait;
}
.a-page
{
float             : left;
page-break-inside : avoid;
} 
body
{
background : #fff!important; 
}  
}
body
{
background : rgb( 204, 204, 204 ); 
}
.a-page
{
background : white;
display    : block;
height     : 29.7cm; 
margin     : auto;
width      : 21cm;
}
.buffer-region
{
min-height : 20px;
}
.container
{
border : 1px dashed black;
width  : 50%;
}
.fc_sm
{
font-size : 1em;
left      : 50%;
margin    : 0;
position  : absolute;
top       : 50%;
transform : translate(-50%, -50%);
}
.grid-container
{
list-style-type : none;
width           : 100%; 
}
.grid-container .container
{
float    : left;
height   : 100%;
position : relative;
}
.size_4x2 li
{
height : 7.4cm;
}
</style>
</head>
<body class = "size_4x2">
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
</body>
</html>

如果您有任何问题或意见，请随时提出/提出。

HTML/CSS 打印布局问题 - 在 chrome 上添加额外的页面

相关内容

最新更新

热门标签：