IEで背景画像が印刷されない時の解決方法

背景画像が印刷されないサンプル画像

IE6で「背景の色とイメージを印刷する」にチェックをしても、背景画像が印刷されない時があります。
下のサンプルのページを印刷してみてください。(プレビューでも構いません)

→背景画像が印刷されないサンプル

背景色は印刷されますが、なぜか背景画像は印刷されません。これはWinIE6.0(IE5.5)に発生するバグみたいです。解決方法は、背景が指定された要素のhasLayoutをonにします。つまり、幅(widthプロパティ)や高さ(heightプロパティ)、zoomプロパティなどを指定すれば、問題なく表示できるってことです。

HTMLコード

 
<div class="bg">
    <p>
        test test test test<br />
        test test test test<br />
        test test test test<br />
        test test test test<br />
        test test test test<br />
        test test test test<br />
        test test test test<br />
        test test test test<br />
    </p>
</div>
 

CSSコード

 
.bg {
    width: 430px;
}
 
.bg p {
    border: 1px solid #999999;
    padding: 0 0 0 5px;
    background-color: #EEEEEE;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    zoom: 1; /* 印刷バグ解決 */
}
 

→解決したサンプル

何かバグがあったら、まずhaslayoutに関係しているんじゃないかと考え、幅や高さなどを指定してみるのがいいと思いますよ。

TRACKBACK URL トラックバック用URL

1
IE6で印刷時に背景が表示されない
IE6では、インターネットオプションで”背景の色とイメージを印刷する”にチェックを入れていても、背景に設定した画像が表示されないバグがあります。
自分の場合は印刷されている箇
クリエイティブポケット -SEO/SEM、デザイン、Wordpress/MovableType、CSSなどWeb制作に関するブログ- on 2010/01/14 15:08:17

COMMENT LIST

No.1

 

とら+

Re:

今までheight:1%を使っていましたが、それだと<a>にかけた背景が印刷されませんでした。
zoom:1で全て解決でき助かりました。

2009.05.17 10:08

No.2

 

webbibo管理人

Re:

解決できて良かったです。
IEには世話やかされますよね。

2009.05.18 19:19

No.3

 

からし漬け

解決しました!

いままでメニュー用背景などがIE6だけ印刷されず困っていたのですが
こちらの方法で解決しました!
とても助かりました。

2009.06.05 17:12

No.4

 

webbibo管理人

Re:解決しました!

どういたしまして。
お役に立てて何よりです。

2009.06.05 19:35

No.5

 

匿名

Re:

コメントをどうぞ

2010.02.23 14:22

6 件中 1 - 5 件を表示

POST YOUR COMMENT

送信内容
vericode

おすすめCSSサイト

あわせて読みたいブログパーツ

TopPageへ

更新情報RSSアイコン

閉じる