WEBページの印刷プレビューが表示されない不具合の対処
Internet Explorer及びFirefox双方のブラウザでWEBページを印刷プレビューしたときに、内部コンテンツの表示がページごと消えてしまったり、一部表示されない部分があったので、その時に対処した方法を忘れないようにメモしておきます。
印刷プレビュー不具合ページでは、CSS（スタイルシート）にfloatで回りこみ設定をしている箇所が多く、どうやらこの“float設定”が“悪さ”をしているみたい（テーブルで組んであるページは印刷プレビューが正常だった為）だと最終的に判断し、以下の対処を行いました。
１．画面表示用のCSSと印刷用のCSSを用意しヘッダに設定。
※印刷用のCSSは、style.cssをそのままコピペで複製し、print.cssに名前を変更。
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”>
※各々のCSSには以下のソースを追加する。（赤色追加ソースで挟む）
【画面表示用CSS にソース追加】
@media screen {
/* 画面表示用CSSの内容 */
}
【印刷用CSSにソース追加】
@media print{
/* 印刷用CSSの内容 */
}
2．印刷用CSS（print.css）の修正。
floatで横並びにするとレイアウトが崩れる場合があるようで、それが印刷プレビューにも影響しているようです。原因の詳細は参考にさせてもらったウェブピボさんの「floatを使わずにinline-blockで横並びにする方法」を御覧ください。
上記を踏まえ、印刷プレビューに不具合を与えていそうなprint.cssのfloatを削除し、削除した部分にウェブピボさんが書かれていた以下のソースを追加してみました。
【修正前】
.sample {
float: left;
}
【修正後】
.sample {
display: -moz-inline-box; /*for Firefox 2*/
display: inline-block; /*for modern*/
/display: inline; /*for ie5～7*/
/zoom: 1; /*for ie5～7*/
}
最終的にInternet Explorerではページによっては一部欠けもあったりするのですが、Firefoxでは問題なく画面表示そのままに印刷プレビューすることができました。印刷プレビューの不具合もケースバイケースだと思いますが、最初にfloat部分を疑ってみるのが一番解決は早いのではないかと思います。 以上。