印刷できない background-image

IE で、CSS の background-image プロパティで指定した画像の一部に、印刷できないものがあることを発見。画面では表示されるものの、印刷プレビューの段階で、もう見えなくなる。

/* 先頭にマークを出す */
#mark {
	background-image: url(../img/mark.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: auto;
	padding: 0 0 0 20px;
}

調べてみると、background-repeat プロパティで、"repeat" 以外の値を設定した場合に、起こるらしい。何だそれ、使えねえなあ。

何とか "no-repeat" のままで印刷する方法はないかとイジっていたら、どうも width プロパティを指定すると、OKっぽい。えー。

#mark {
	width: 240px;
	background-image: url(../img/mark.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: auto;
	padding: 0 0 0 20px;
}

CSSでデザイン頑張ろうとすると、各ブラウザのバグに、まだまだ悩まされる。CSS HACK も楽しいけど、難易度が高めで、下の子たちへの継承が厄介だし。Web制作の敷居が高い気がしてくるのは、きっとクロスブラウザの難儀さのせいかと思うんですけど、どうでしょう?

このエントリーのトラックバックURL
http://www.deftrash.com/admin/mt4/mt-tb.cgi/272
YESMAN at 2011年3月25日 14:03

その通り!