2
印刷用の電子商取引の領収書にいくつかのカスタム書式を追加しようとしていますが、印刷されるすべてのページに固定ヘッダーとフッターが表示されます。問題は、断続的に動作するように見えることです。時々それはうまくいく、他は、ヘッダーはページの中央の上ではなく上に現れます。印刷ダイアログボックスをキャンセルして再度開くと、読み込み方法が変更されることがあります。ChromeでCSSと固定ヘッダー/フッターで印刷する：間欠レンダリングの問題
例：
正しい： 
誤： 
誤： 
が、これはクロムのレンダリングの問題のいくつかの種類ですか？
以下の全コード：
body{
background: #FFFFFF;
font-size: 12pt;
}
.bold {
font-weight:bold;
}
.clr {
clear: both;
}
.invoice-title {
font-size: 14pt;
color:#734B3A;
margin:25px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
table {
width: 100%;
}
th {
text-align: left;
border-bottom:1px solid #EEE;
}
.variation {
font-size: 11px;
}
#main_container {
width:100%;
margin:0 0 30px 0;
}
#main {
width:720px;
margin:auto;
}
#main .header_logo {
text-align: right;
margin:15px 0 15px 0;
font-size: 24px;
font-weight: bold;
color:#000000;
font-family: Arial, Helvetica, sans-serif;
}
#main .wrapper {
border:1px solid #EFECDC;
background-color:#FFFFFF;
}
#main .wrapper-table {
margin:0 0 0 0;
padding:25px 25px 25px 25px;
font-family:Arial, Helvetica, sans-serif;
}
.short_cell {
width: 90px;
}
@media all {
.page-break { display:none; }
}
@media print {
.page-break { display:block; page-break-before:always; }
.noprint { display: none; }
}
body{
margin-top: 145px;
}
#main .header_logo{
font-family: 'Sacramento', cursive;
color: #D79E32;
font-size: 3.5em;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0px;
padding-top: 90px;
line-height: 0.6em;
padding-bottom: 10px;
border-bottom: #ade6df solid 10px;
position: fixed;
top: 0;
width: 715px;
background-color: #fff
}
#main .header_logo img{
max-height: 120px;
max-width: 120px;
float: left;
margin-top: -85px;
}
#main .wrapper{
border:none;
}
.footer {
background: #ade6df;
color: #fff;
text-align: center;
font-family: 'Open Sans', sans-serif;
padding: 5px 0;
font-weight: 300;
position: fixed;
bottom: 0;
width: 715px;
}
.footer a{
color: #fff;
text-decoration: none;
}
.footer .spacer {
font-size: 0.5em;
padding: 0 10px;
vertical-align: middle;
position: relative;
top: -2px;
}
.page-break{
height: 215px;
width: 100%;
}
.page-break:last-child{
display: none;
}
@media screen {
.footer {
bottom: 20px;
}
body{
margin-bottom: 30px;
}
}<div style="main_container">
<div id="main">
<div class="header_logo">
<img src="/receipt_logo.jpg" alt="" />
My Company
</div>
<div class="clr"></div>
<div class="wrapper">
<div class="wrapper-table">
<table cellpadding="0" cellspacing="5" border="0" style="margin-left:5px;">
<tr>
<td class="invoice-title">Receipt</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><strong>Date:</strong> 9/13/2016</td>
</tr>
<tr>
<td><strong>Order Number:</strong> 123456789</td>
</tr>
<tr><td><strong>Email:</strong> [email protected]</td></tr><tr><td><strong>Phone:</strong> 585-123-4567</td></tr><tr><td><strong>newsletter subscribe:</strong> 0</td></tr> <tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td valign="top" style="padding-right: 20px;"><strong>Invoice Address:</strong><br />
Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br /> </td>
<td valign="top"><strong>Shipping Address (Me):</strong><br />Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br />Method: Standard Shipping<br />Shipping: $6.99<br /> </td> </tr></table>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="5" border="0" style="margin-top:30px;">
<tr>
<th>Product</td>
<th class="short_cell">Price</td>
<th class="short_cell">Qty</td>
<th class="short_cell">Subtotal</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr class="page-break"></tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr style="margin-top:30px;">
<td> </td>
<td colspan="2" align="right">Shipping:</td>
<td class="short_cell bold">$6.99</td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right">LAWN:</td>
<td class="short_cell bold">-$8.70</td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right">Total:</td>
<td class="short_cell bold">$56.27</td>
</tr>
</table>
</div>
</div>
<div class="footer">
My company<span class="spacer">●</span><a href="#" target="_blank">mycompany.com</a><span class="spacer">●</span>888-111-1234<span class="spacer">●</span><a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
<div class="page-break"></div>
申し訳ありませんが、あなたは少しプロットを失ってしまいました。フッターは下部に、ヘッダーは上部に配置します。なぜあなたがフッターを移動したのか分かりません。最初のスクリーンショットの例は正しいです。 2番目と3番目はありませんが、ページリロード時に同じコードで生成されました。 – TH1981
Opps！今すぐ確認してください...私はそれらを編集しました。 –
おかげさまで@Abhishek - ほぼそうだけどかなり。すべてのページでヘッダーとフッターの両方を修正する必要があります。私が「ポジション：固定」をフッタに付け加えるとすぐに、私は断続的な問題をもう一度やり直します。それは理にかなっていますか？申し訳ありませんが私はクリアされていない場合： – TH1981