我有一个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/
当我看到打印布局时
有关如何修复打印页面问题的任何建议？
提前感谢您的帮助。
答案 0 :(得分：3)
您的大多数问题都是由于边距，填充和边框的低效使用造成的。我解决了这个问题，首先通过删除从未被调用的类定义来删除不相关的代码并删除我知道或怀疑没有影响的行，在每次删除后测试运行新代码以确保没有对性能的影响页面。
我的下一步是将以下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 es以及所有特殊属性定义中。请注意，在打开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>
如果您有任何问题或意见，请随时询问/制作。