印刷できない 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制作の敷居が高い気がしてくるのは、きっとクロスブラウザの難儀さのせいかと思うんですけど、どうでしょう？
Posted by dT by 19:57
トラックバック
このエントリーのトラックバックURL
http://www.deftrash.com/admin/mt/mt-tb.cgi/272