先日いつものことながら、少々遅れ気味にFirefox 3を入れてみました。今はFirefox 2と共存させています。Firefox 2とFirefox 3の共存については今回は、Bowz::Notebookさまの記事「[ Firefox ] Windows XP で Firefox 3 と Firefox 2 を共存させる方法」を参考にさせていただきました。

あるページをFirefox 2とFirefox 3でブラウザチェックして、印刷もチェックしたところ、Firefox 2で印刷プレビューがOKであるのに、Firefox 3で印刷プレニューするとうまく表示できていないことを発見しました。

問題の原因を探っていたところ、印刷用に指定しているprint.cssがあるのですが、これの中に他のcssファイルをインポートしてきているのですが、このインポートしてきているcssファイルの中にまたインポートしてきている他のcssファイルがある状態＝入れ子になっていると、入れ子になっている子の方のcssがprint.cssに読み込まれず、印刷プレビューの表示が崩れる、ということになっていました。

print.cssにおける@importの入れ子の状態の例：
print.css
　　|---style01.css
　　|---style02.css
　　　　　　　|---style02-1.css
　　　　　　　|---style02-2.css

この場合、print.cssには、style01.cssとstyle02.cssまでがcssとして認識されるが、style02.cssにインポートされているstyle02-1.cssとstyle02-2.cssのcssはprint.cssの方に認識されない、ということに。

これは、Firefox 3の印刷の場合だけに起こる現象で、通常のブラウザ表示の場合はcssファイルが@importで入れ子になっていても問題ありませんでした。Firefox 2の場合は、ブラウザであっても印刷の場合であっても、上記のような入れ子のcssでも大丈夫でした。