“iepngfix.jsで背景に透過PNGを使ったときの、印刷用CSSでの注意。”という、夢実現のためのアファメーション。

iepngfix.jsを使う場合、印刷のときに注意が必要。

中でも、いろいろ使い勝手がいいのでユンサンさんの「iepngfix.js」を使わせてもらってます。

背景に透過PNGを使う場合、ポジションを使うとレイアウトが崩れるとか、背景画像部分が100%透過してないとリンクが効かなくなる場合があるなど、注意しなきゃいけないことがいくつかあるけど、それでも使い勝手が良い。

んが。

IE6でページを印刷する場合は、ちょっと問題があるみたい。

iepngfix.jsを使って、あるセレクタにフィルターを適用すると、そのフィルターを適用した部分が真っ黒になって印刷されてしまうらしい。

じゃあ、プリント用のCSSを作って上書きすればいいのかというと、基本はOKなんだけどちょっと注意が必要。

例えば、PC用のCSSで

<link rel="stylesheet" href="default.css" type="text/css" media="screen,projection" />

#container {
text-align: left;
background: url(back.png) repeat-y center top;
width: 780px;
margin-right: auto;
margin-left: auto;
}
* html #container {
behavior: expression(IEPNGFIX.fix(this));
}

と定義して、#containerにフィルタを適用し、

media属性でprintを指定したCSSで、

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

メニューやらなんやら、印刷には不必要な部分をdisplay:none;にして非表示にして、その分#containerの幅を小さくして

#container {
text-align: left;
background: url(none);
width:600px;
}

とすると、通常であれば印刷用のスタイルが上書きされて、背景が表示されないはずだけど…。

なぜかフィルターが適用されたままになってしまって、さらに透過PNGの透明部分が黒く表示されてしまうみたい。

うむむぅ…。

いろいろと属性を切り分けして試してみたけど、どうやらwidthを指定しているとダメみたい。

つまり、

#container {
text-align: left;
background: url(none);
}

たったそれだけのことみたいだけど、かなり引っかかったのでメモメモ。

※再現性があるかどうかは知りません。とりあえず自分が作ったサイトで問題になったので…一応ね。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！