スポンサードリンク

Chrome / Firefox / Edge / IE11 / Safari で同じwebページを表示して印刷プレビューを確認していたら、1ページ目がヘッダだけの表示になってしまうブラウザが2つあった。

 

【Firefox】と【IE11】では、変なところで改ページしてしまい、ほぼ空のページが出来てしまっていた。

他のブラウザは普通に表示されている。

 

コンテンツの量を減らしてみたら、両方とも1ページ内に収まった。

全然??でわからない。

 

■ページの構成は「header」「wrapper」「footer」のシンプルな構成です。

 

■どうやら「header」「wrapper」の間で改ページされてしまうようです。

 

■印刷の改ページを制御するcssを設定してみた。

改行を禁止する以下の3パターンを試してみたが、全く効かなかった。

こちらはブロック要素のみ効くと書いてあった。

・page-break-after: avoid;
・page-break-before: avoid;
・page-break-inside: avoid;

 

さっぱりわからない…

「wrapper」のコンテンツ量を減らすと1ページにキレイに収まる。

ブロック要素ごと改ページされてしまうようです。

 

■inlineをためしてみた。

これでいいのか?やっていいのか?はわかりませんが、ブロック要素ごと改ページされていたので、「wrapper」を「display: inline;」とプリント用cssで設定したら、改ページされなくなった!!

とりあえずこれでやってみよう。

 

 

 

スポンサードリンク

コメント
コメントする
トラックバック
この記事のトラックバックURL

スポンサードリンク