アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2008年1月29日

iepngfix.jsで背景に透過PNGを使ったときの、印刷用CSSでの注意。

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

IE6以下で透過PNGを利用するためのJSの決定版!?

通常、IE6以下では透過PNGは使えなくて、透明度を設定した部分はグレーで表示されてしまう。

IE独自のフィルターという機能を使えばいいんだけど…意外とめんどくさい。

そこで、透過PNGを使えるようにするために、さまざまなJSのライブラリが開発されている。

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);
}

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

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

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2008年1月29日 21:59 | ID:758

ページトップ△

ページトップ△