Print用CSS

本日プリント用CSSをゴリゴリと書いていましたが、その時2つほど問題になった点があったのでメモ代わりに書いておきます。

まず一つはナビゲーションやバナーが表示されているサイドバー（div#secondary）をdisplay: noneで消しました。このサイドバーはdiv#secondaryで定義してあり、中にdiv.localNavが定義されています。その下にバナー群がpタグで定義されていますが、Firefoxのプリントプレビューではきちんとサイドバーが消えてくれるのですが、IE6では何故かバナー群が消えてくれません。なのでdiv#secondaryの子要素を消すためにユニバーサルセレクタを使いました。

div#secondary * { display: none; }

こいつでIE6でもサイドバーが非表示になってくれました。

次に問題になったのがdivごとに改ページされてしまったのです。メインコンテンツ部はdiv.sectionで各ブロックを定義してあり、簡易clearfixとしてoverflow: hiddenを記述していたのですが、こいつが悪さをしていた模様です。なのでoverflow: visibleで上書きしました。

div.section { overflow: visible; }

これで印刷用CSSで奇麗に印刷出来るようになりました