ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：hana999999 【CSS】IE6で印刷時にレイアウトが崩れる
困り度：
  • すぐに回答を！
 大変困っています。
印刷を前提に作ったページではないのですが、
クライアントから印刷時にレイアウトが崩れて印刷できないとご指摘を受けました。
そこで、IE6とFirefoxで確認したところ、
Firefoxではレイアウトが崩れずきちんと印刷されますが、
IE6では2カラムの右側（メイン部分）が消えてしまっています。
（IE7は自分のオフィスでは入れてはいけないことになっているので、IE7では確認していません。）
何か問題があれば、ご指摘お願い致します。


<div id="container" class="clearfix">

<div id="siteSub">
ああああああ
</div>

<div id="siteMain">
いいいいいい
</div>

</div>

■CSS--------------------------------
div#container{
width: 950px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
div#siteSub{
margin: 0px;
padding: 0px;
width: 230px;
display: block;
float: left;
}
div#siteMain{
padding: 0px;
float: left;
width: 710px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}


右側のメイン部分が消えてしまっているので、
大雑把にレイアウト部分だけ書いてみました。
siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。
linkの部分は media="all"としています。
<link rel="stylesheet" type="text/css" href="css/import.css" media="all">
また、Yahoo! UI Libraryを参考にした、reset.cssも入れています。
質問投稿日時：08/04/17 09:59
質問番号：3954198
最新から表示｜回答順に表示

回答

 
回答者：kuzumiHK 単純に、両方ともfloat:leftになっていることと、
widthとmarginの合計が960pxになっていて、
段が崩れているからではないでしょうか。

div#siteMainのfloatをrightに、
widthを700pxにするなどでいかがでしょう。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/04/23 23:20
回答番号：No.3
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：abril サンプルをそのまま（＋cleafixのclassを加え）貼り付けて印刷してみましたが、「IE6では2カラムの右側（メイン部分）が消えて」という状態にはなりませんでした（書式はXML宣言有りのXHTML 1.1）。

コンテンツ全体の幅が950pxとかなり広いので、A4縦に100%では当然入りきらないので「（はみ出す）メイン部分の右端が切れて」印刷はされますが。でもこの状態はFirefox2.0〜でも同様です。質問者様の抱えているトラブルは「メイン部分が完全に印刷されない」という状態なのでしょうか？であればちょっと解せないですね…。A4横にする、もしくは100%ではなく縮小印刷をする、としても「消えて」いますか？

> 何か問題があれば、ご指摘お願い致します。
> siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。

ご提供されたCSS・HTMLを見る限りは特に問題があるとは思えません。コラム幅の合計も合っている様ですし、floatについても、clearfixを併用されていますし。

印刷に関するスタイルの不具合は、ANo.1の回答者様もご指摘の通り、printメディア用にCSSを振り分けて対処するしかないのですが、「消えて」という状態がIE6からのプリント時に起こらないので、今のところ具体的なアドバイスができないのですが…試しにprintメディア用だけ、"div#siteSub"に"display: none;"を追加して印刷してみて下さい。印刷時にはメイン部分だけになる（この状態でも右端が少し切れるとは思いますが）筈ですが、それでもメイン部分が「消えて」しまいますか？
種類：補足要求
どんな人：専門家
自信：参考意見
回答日時：08/04/18 11:34
回答番号：No.2
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：egoblock 印刷用のcssを作って読み込ませるのが一般的だと思います。
種類：アドバイス
どんな人：経験者
自信：自信あり
回答日時：08/04/17 16:06
回答番号：No.1
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示｜回答順に表示
このページのトップへ