Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@shibe23

IE8で印刷が正常に行われない時の対処法(html5shiv.js)

More than 1 year has passed since last update.

IE8で印刷が正常に行われない場合の原因と対処を下記に記載します。
※HTML5で「html5shiv.js」を使用している場合

IE8の「背景の色とイメージを印刷する」にチェックが入っていない

出だしからHTML5とは無関係ですが、意外とこの設定を知らない方が多かったです。

IE8のツールバー「ファイル」→「ページ設定」→「背景の色とイメージを印刷する」にチェックが入っていないと、背景が印刷されませんので、チェックを入れてください。

 html5shiv.jsが印刷対応版ではない

html5shiv.jsには、web版と印刷対応版があります。
印刷対応が必要な場合は「html5shiv-printshiv.js」を使用して下さい。

CSSでbackgroundを指定する際、セレクタにHTML5で追加されたタグを指定している

「html5shiv-printshiv.js」を使用していても「web上では問題なく表示されるが、印刷時に表示されない」場合があります。

article h1{ background: url(...); }

のように、backgroundプロパティを指定しているセレクタがHTML5タグだと、正常に表示されないことがありますので、HTML5タグ以外の要素をセレクタとして使用するようにしてください。

floatの解除方法に"overflow:hidden;"を使っている

overflow:hidden;は印刷時に正常に表示されない場合があります。floatを使用している場合は、clearfix等を使うようにしてください。

適切ではない箇所に"position:relative;"を使っている

position:relative;を指定している場合、レイアウトによっては、正常に反映されないことがあるようです。
不要な指定は削除するか、print:cssを使って印刷用にレイアウトを調整してください。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shibe23

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?