2

我想为打印页设置页边距顶部和底部以编写页眉和页脚。

我在 Firefox 中做到了。但它不适用于 chrome 和 Internet Explorer。

当我使用@page代码时，它可以在 chrome 中运行。但我不能在顶部写页眉，在底部写页脚。我怎么解决这个问题？

这是我的代码

分页.php

<!DOCTYPE HTL> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">    
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>

<body>
<table class="header" cellpadding="0" cellspacing="0">
  <tr>
    <td>header
    </td>
  </tr>
</table>

<table class="content" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">
   content
    </td>
  </tr>
</table>

<table class="footer" cellpadding="0" cellspacing="0">
  <tr>
    <td>footer
    </td>
  </tr>
</table>

</body>
</html>

分页.css

@media screen{
.header{
    width:768px;
    height:100px;
    border:2px solid #000;
}

.content{
    width:768px;
    margin-top:10px;
    margin-bottom:10px;
    height:1000px;
}

.footer{
    width:768px;
    height:100px;
    border:2px solid #000;
}
}

@media print{

.header{
    position:fixed;
    top:0;
    left:0;
    width:768px;
    height:100px;
    border:2px solid #000;
}

.content{
    width:768px;
    margin-top:120px;
    margin-bottom:120px;
    height:1000px;
}

.footer{
    position:fixed;
    left:0;
    bottom:0;
    width:768px;
    height:100px;
    border:2px solid #000;
}

@page{
    margin-bottom:150px;
}


}

IE截图：

在此处输入图像描述

火狐截图：

在此处输入图像描述

铬截图：

在此处输入图像描述

4

0 回答 0