IE7、FireFoxでサイト印刷時のレイアウト崩れを解決〜CSS
IE7、FireFoxでサイト印刷時のレイアウト崩れを解決〜CSS
IE7、特にFireFoxでサイトを印刷する際、２ページ以上になると２ページ目以降のfloatが解除されレイアウトが崩れてしまう、という症状が出てしまいます。そのレイアウト崩れを解決するプリント用CSS。
サイトレイアウト用のCSSとは別に、『media="print"』と記述して、以下のように印刷用CSSを読み込みます。
<link href="印刷用CSS" rel="stylesheet" type="text/css" media="print" />
『media="print"』と記述する事で印刷時のみ適用されます。
以下を参考に、印刷用CSSにレイアウトの崩れを解決するための内容を記述します。IE7とFireFoxそれぞれ解決方法が異なるため、PHPでブラウザごとに違うCSSを読み込む等の工夫が必要になります。
「レイアウト例」
| 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
コメントする