CSS 印刷のときにめんどくさい
スタイルシートでデザインしていると盲点なのが印刷です。firefox でもけっこうバグがある。
でもやっぱり一番厄介なのが IE。
たとえば。
width をかっちり指定していると、印刷時にずれる場合があります。検証していないので詳しくはわからないですが、どうも標準モードでレンダリングしていても border まで計算に入れているようです。ほかには、float を指定した要素にかかる padding が半分になるようです。
厄介だったのが、text-align:justify; を指定した場合、その要素にかかる float はクリアされるというもの。
実は firefox や Win IE6 などの最新のブラウザでは均等割付けがきちんと適用されるようで、せっかくなので指定してみたんですが、Win IE6 で印刷プレビューを見るとずれる。
p { text-align:justify; } @media print { p { text-align:left; } }
このように書けば、印刷時には均等割付けが外れて、レイアウトが維持されます。
このバグは IE だけのようなので、
@media print { * html p { text-align:left; } }
このようにしてもいいかも。
ああ、IE の場合は、均等割付けをやるには、text-align:justify; のほかに text-justify:inter-cluster; だかを指定しないとだめだ。日本語みたいな単語の間にスペースが入らないやつ用の指定。
今やってるのが既存サイトの他言語ローカライズなので覚えておかないとな。