2016-09-29 7 views
4

(。。これはChrome issue 631222ある、とChromeで修正された54.0をリリース*補遺)ページの上部にあるテーブルのヘッダーを印刷WindowsとMacでは、私たちは回避できない厄介なバグを打ちました。クローム印刷のバグ誤っ

私たちは、HTMLテキストの編集を含まない回避策を探しているので、CSSやJavascriptの回答が役立つかもしれません。

私たちがどのように見えるその最初以外のページの上部にあるテキストを取得している:これは段落のオーバーレイであり、その上、後に発生したテーブル用の2つの異なるテーブルヘッダ

enter image description here

ページ。 (ここで、ヘッダが再び印刷されます。)

あなたは我々はすでに、もちろん、Googleにこのことを報告しましたが、誰もが私たちの顧客を得るために、回避策を考えることができれば、我々が思っていたフルexample page here.

を見つけることができます再度印刷します。 HTMLを変更することはできませんが、CSSを変更したり、JavaScriptを使用することができます。 (thead要素タグを削除すると、例えば、問題を解決するために表示されますが、我々はHTMLを変更することはできませんので、そのソリューションは、私たちのために動作しません。)

は、コードは単純です:

<!DOCTYPE html> 
<html><head> 
<title>Broken Printing</title> 
</head> 
<body> 
<h1>Printing Issue 9/29/2016</h1> 
<p>Lorem ipsum for page break</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<p>Lorem ipsum</p> 
<table> 
    <thead><tr><th>Survey</th></tr></thead> 
    <tbody><tr class="odd"><td>The Foundation 2016&nbsp;</td></tr></tbody> 
</table> 

<table> 
    <thead><tr><th>Year</th></tr></thead> 
    <tbody><tr><td>2015</td></tr></tbody> 
</table> 

</body> 
</html> 
+0

ここで、TheadディスプレイCSSを 'table-row-group'に設定するという部分的な回避策があります。どのテーブルもページ間で分割されていると不完全ですが、私たちの場合はまれです。 –

+0

@MrListerええ、なぜバリデータが403エラーを受け取っているのか分かりません。 URLの内容をバリデーターに貼り付けるとうまく動作します。私のサイトで403と何が起きているのかわからない - ログにw3cのリクエストがあり、403の応答がある。私はそれを引き起こす私の.htaccessで何も見なかった。 –

+0

このページだけではなく、サイト全体です。とにかく、あなたのページには何も問題はありません。 Chromeのバグだと思う。 Theadを別のtbodyに変更していますか?それはJavaScriptの小さく単純なビットを必要とするだけです。 –

答えて

6

我々は持っています回避策:

@media print { 
    thead { 
     display: table-row-group 
    } 
} 

これは私達が私達のレポートで多くを必要としない機能を失う - 改ページでテーブルヘッダの繰り返し - それは私たちのために十分である、とChromeが固定されます時に容易に除去されます。