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
その通り!