山梨県でホームページの制作をしています。コンテンツを重要視した使いやすいWebサイトを提供します。
2011-03-25

XP+IE8で印刷プレビューがおかしいことになったときの対処方法

この記事は2011年3月に書かれたもので、内容が古い可能性がありますのでご注意ください。

印刷プレビューが変だぞ!IE8!

最近、コーディング作業を請負でやっていて気がついたので備忘録として書いておきたいと思います。

WindowsXPでインターネットエクスプローラー8(以下IE8)を使っていると、何故か印刷プレビューがうまくいかないというものです。

PCのモニターで閲覧する分には何の問題も無いのですが、印刷プレビューをすると印刷時画面が中途半端な位置でページを分割して表示してしまうということが起きてしまいました。

同じIE8でもVistaでは現象が出ませんし、もちろんXPとIE7の組み合わせでもそのような現象はでません。

基本的な対応として、印刷時に使用するCSSファイルを用意して、…
<link rel=”stylesheet” href=”hoge.css” type=”text/css” media=”print”>


こんな感じ。

hoge.cssでfloatが怪しいとか、positionが怪しいとか、気になるエリアを片っぱしからhiddenして非表示にするとか、そんなことをゴニョゴニョとやってみたのですが結局ダメでした。

互換表示が怪しいぞ!IE8!

そんなこんなで困っていると、どうやらIE8の互換表示に関係しているかもということに気が付きました。

gokan
IE8の互換表示機能について(IEデベロッパーセンター互換表示機能の紹介)
http://msdn.microsoft.com/ja-jp/ie/dd218492.aspx

互換機能ボタンを押した状態で印刷プレビューを見てみると…

 お!直ってる。

この互換機能を使うことで、IE8の印刷プレビューの表示も変わるようです。

…とは言え、互換表示ボタンを押してね!なんてアナウンスをホームページに表示するのはちょっとカッコ悪いのでIE8自体が互換表示を識別してくれる方法は無いかな?

…とググッてみると…

ググって見つけたぞ!今に見てろよIE8!

見つかりました。

IE8 互換表示について/Minase’s Blog – FYA
http://www.fya.jp/blog/2009/05/27/ie8/


こんなブログ記事を発見。
.htaccess使ったりも出来るようですが、てっとり早いのはmetaタグをHTMLに記述する方法。

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<head>~</head>内にこれを記述するだけ。

ブラウザに僕はIE7向けに作られたサイトなんだよって言うのを宣言する記述みたいです。
W3C的にもValidな記述みたいです。
印刷プレビューで同じような現象でお悩み位の方は先ず互換表示切り替えボタンをクリックしてみてください。

では。

 

 

関連記事