ieやfirefoxで。cssレイアウトが印刷時崩れる。

質問

cssでレイアウトしてます。
ieやfirefoxでの　ブラウザ上（画面）表示ができるのですが、
いざ、印刷プレビューや印刷になると　レイアウトが
崩れてしまいます...どのような　解決策。問題点があるのでしょうか？

印刷ページが中途半端にページをまたいでしまうから？
marginとpaddingがゴチャついて　ダメ。
いろいろ考えられますが。。。

よろしくお願いします。

回答No.4

yudachi_12 · ベストアンサー

No2.です。
>印刷時のみ　つかう　ＣＳＳは別ファイルを作って
>改めてつくりなおすということでしょうか？
>または、　一部　書き換え（no.1さんのアドバイス）のみで
>すむのでしょうか？

私は、一つのCSSファイルに沢山書き込むのが好きではないので、
（後々、どこで何を指定しているのかが分からなくなります…）
ディスプレイ表示用CSSと印刷用CSSを別ファイルにしています。

ディスプレイ表示用：<link href="sample.css" rel="stylesheet" type="text/css" media="screen,tv" />
印刷用：<link href="sample_print.css" rel="stylesheet" type="text/css" media="print" />
『media』の部分で何に対応させるCSSなのかを指定しています。

印刷用CSSには、印刷させたくない部分（サイドメニューやフッターなど）に『display: none;』と『float: none;』を指定し、
印刷させたい部分（メインコンテンツ）に『width: 100%;』を指定して、
大体出てくる紙のサイズに印刷部分の横幅が合うようにしています。

以前は本当に必要最低限の指定のみだったのですが、最近は印刷した時に読みやすいようにフォントを明朝体に変えてみたり、
印刷部分に外部リンクが含まれていた場合は、リンクの横にURLを表示させたりと、
CSSの使い方次第では『印刷だからこそ生きてくる』見せ方も出来るので、勉強していくのも楽しいですよ！
お力になれれば幸いです。

お礼

なるほど　なるほど。お力どころか..ありがとうございます。
無事解決にいたりました。

クライアントに対してもその旨をつたえ　了解を得たので、
トラブルにならずすみました。

回答No.3

yudachi_12

No2です。
すみません、No1.の方の回答への補足でした。
失礼いたしました。

回答No.2

yudachi_12

No2.の方の回答へ補足です。
IE6以前のバージョンだと用紙サイズに合わせた印刷機能がありませんので、
サイズによったらfloatさせたサイド部分がごっそりなくなる場合もあります。
そのことも踏まえて、No2.の方のように『float:none;』を加えるか、
または印刷されなくても不都合ない部分（サイドメニューなど）を
『display:none;』で消してしまう方法もあります。
印刷時のみに適応させるCSSの指定方法も複数ありますので、一番ベストな
ものを選択して使ってみてください。

補足

印刷時のみ　つかう　ＣＳＳは別ファイルを作って
改めてつくりなおすということでしょうか？

または、　一部　書き換え（no.1さんのアドバイス）のみで
すむのでしょうか？
よろしくお願いします

回答No.1

noname#83877

IEもfirefoxもおかしいのであれば、linkにmedia=screenの指定がまず一番怪しいです。
あとはfirefoxだとfloatを指定された要素がページをまたぐ場合に途切れてしまうバグがあります。その場合は単純に印刷用cssにfloat:none;を指定してやるのが一番簡単な解決策です。

補足

ちなみに　ieでのみ　おかしいです。
fire foxでは　問題ありません。firefoxをベースに作ってます。