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

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に関係しているんじゃないかと考え、幅や高さなどを指定してみるのがいいと思いますよ。

date 2010.10.24