最近は余程の理由がない限り、IE8の対応は遠慮させていただいているんですが、今回どうしても対応しないといけない事情があったので、その時の対応策を残しておきます。
前書きが長いんで、結果知りたい方は、「対応した内容」へどうぞ。
言葉は汚いですが、正直「くたばれIE」と真剣に思っています。
しかもIE8は来春まででサポートも終了するし、大きなレイアウト崩れがなければそれ以上の対応はしていません。
以前だったら、角丸にならないからといって、PIE.htcとかで対応したりしてましたが、重くなるわ、ブラウザシェアは少なくなるわ…で、今年に入ってから対応するのやめてました。
ところが、今回は依頼主の会社がほぼ全台VISTAでIE8…をお使いとのこと。
HPの完成にあたり、稟議も決済もIE8対応しないことには、納品ができない…。なんということ。。。
お客様から申告があったIE8の現象
・一部のcss表示が崩れる
・印刷時にレイアウトが崩れるページと正常なページがある
・一部エフェクトが効かない
ちなみに、こちらのIEエミュレーターでは表示、印刷、印刷プレビューともに正常でした。
クライアントのご要望、話しあった結果
角丸とかエフェクト関連は、新しいブラウザに対応していればそれでOKとのこと。
古いブラウザなので、無理して対応させて表示速度が遅くなる可能性は避けたい。
非常にご理解のある担当者様です（泣）。社内の稟議・決済さえ通ればよいので、レイアウト崩れと印刷崩れのみ対応してほしいとのこと。
対応した内容
まず、お客様に崩れた状態の印刷したものをいただきました。
同じCSSを使っているのに、一部だけ崩れているのが分かりました。それも共通項のところだったので、何か怪しい。
念のため、html確認するも問題なし。閉じタグ等OK。
ネットでIE互換モードかも…というのを見つけたので、試してみても変わらず。
お客様のIE設定をチェックしてもらっても、特に問題になりそうなところはなし。
電話でいろいろ話をする内におかしいのは1ページだけで、しかも印刷時のみと判明。ブラウザでの表示はどのページも問題なし。
しかも印刷プレビュー時にそのページの文字サイズが一度小さくなって、元の指定サイズに戻るそうで、元の文字サイズに戻る時にレイアウトが崩れるとのこと。
ますます、怪しい。
その話を聞く限り、CSS等の問題ではないなと判断。ふと見るとそのページだけgooglemapを掲載していることに気づく。
ブラウザでの表示に問題がなかったので、完全に見落としていたけれど、googlemapはこれまで古いブラウザはすぱっと切り捨てている経緯を思いだし、googlemapを削除してみました。
なんということでしょう！それだけで印刷正常に戻りました（笑）
おまえか！googlemap！っていう感じで、あっけない対応でした。
結局、googlemapは削除して、画像で地図を作成して、無事終了。
最後、めでたし、めでたしでしたが、納品着前で焦りました。
まとめ
以前、ネット故障に関するコールセンターで働いていた経験から、トラブルがあった時はむやみに対応せずに、「現象の確認」と「簡単にできることからの切り分け（どこに原因があるのか1つずつ確認していくこと）」からスタートしています。
あとは、お客様のおっしゃることを鵜呑みにしないこと。誤解を生むかもしれませんが、特定の条件下や一部だけトラブルが起きていても、お客様はそれをすべてでトラブルが起きていると感じていることが多いです。
あと、電話だと見ている画面が違うので、双方同じものを見ている（想像している）と思い込んでしまうことがあります。画面を見たら、あぁ～と思うことでも聞き出すのはけっこう大変だったりします。
今回は電話で切り分けしながら対応できたので、比較的早く解決できました。これがメールだけとか直接対話できないケースだともっと時間がかかったんだろうなと思うと、恐ろしいです。。。
おまけ－IE互換モードの対応
せっかく調べたので、備忘録のために残しておきます。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
参考サイト：http://ozpa-h4.com/2015/03/12/ie-layout-false/
<meta http-equiv="X-UA-Compatible" content="IE=8" />
参考サイト：http://furusato.hatenablog.com/entry/20110127/1296134771
おまけ－レスポンシブWebデザインでの印刷対応
@media only screen and (min-width: 768px) { }
…と記述するところを…
@media print, screen and (min-width: 768px) { }
…と記述するのだそうです。
ただし、印刷用CSSを別途設定している場合やモバイルだけに指定したい場合などはうまくコーディングしないと、レイアウト崩れになる可能性があるとのこと。
