素材の壺

IE7、FireFoxでサイト印刷時のレイアウト崩れを解決〜CSS

IE7、FireFoxでサイト印刷時のレイアウト崩れを解決〜CSS

【概要】

IE7、特にFireFoxでサイトを印刷する際、2ページ以上になると2ページ目以降のfloatが解除されレイアウトが崩れてしまう、という症状が出てしまいます。そのレイアウト崩れを解決するプリント用CSS。


サイトレイアウト用のCSSとは別に、『media="print"』と記述して、以下のように印刷用CSSを読み込みます。


<link href="印刷用CSS" rel="stylesheet" type="text/css" media="print" />


『media="print"』と記述する事で印刷時のみ適用されます。
以下を参考に、印刷用CSSにレイアウトの崩れを解決するための内容を記述します。IE7とFireFoxそれぞれ解決方法が異なるため、PHPでブラウザごとに違うCSSを読み込む等の工夫が必要になります。


レイアウト例

 div.all
div.left div.right

IE7

IE7対策は float を指定している箇所に zoom:1 を追記します。

div{ zoom:1;}


FireFox

FireFox対策は display:table と display:table-cell で float を指定している箇所をテーブルレイアウト化します。

div.all{ display:table;}

div.left{ display:table-cell; float:none;}

div.right{ display:table-cell; float:none;}


PHPでブラウザごとに違うCSSを読み込むサンプル

<?php
$agent = getenv( "HTTP_USER_AGENT" );
if( ereg( "Firefox", $agent ) ) {
$print_css = "<link href=\"FireFox用CSS\" rel=\"stylesheet\" type=\"text/css\" media=\"print\" />";
}else if( ereg( "MSIE 7.0", $agent ) ) {
$print_css = "<link href=\"IE7用CSS\" rel=\"stylesheet\" type=\"text/css\" media=\"print\" />";
}
echo $print_css;
?>


※あくまで解決方法の一つなので、上記の方法で必ず解決するとは限りません。
 上記を参考にして試行錯誤をお願い致します。

トラックバック(0)

トラックバックURL: http://www.materialpot.com/mt-tb.cgi/6

コメントする

名前
電子メール
URL
コメント
サイト内検索
TOP利用規約リンクについてお問い合わせ│相互リンク[ 素材1 ][ 素材2 ][ 素材3 ][ HP制作 ]│
無料アフィリエイトツール「アフィーノ」