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

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

管理人:sofu

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

blog comments powered by Disqus

PageTop