負のマージンとSafariの話をまとめる（ご協力本当にありがとうございます）。マイナスのmargin-topまたはmargin-bottomを指定するときは、ちょっとSafariに気をつけた方がいいかも。
いまのところわかっている症状は以下の通りだ。あるセレクタに対し、printメディア用、screenメディア用のCSSのどちらかで非負（０または正）の縦方向のマージンを指定し、もう片方でマイナスの縦方向のマージンを指定すると、印刷プレビューや印刷時に、印刷、画面表示どちらに対しても両方のマージン指定を合算してしまう。
残念ながら、ADP: これからのCSS画像置換で使ったサンプルが、今回のために用意したんじゃないかと思えるぐらいはっきりその症状が出てしまうため、これで説明する。Safari（1.3.2または2.0.4）でそのページを開き、[ファイル]→[プリント]→[プレビュー]で一度印刷プレビューを表示すると、印刷プレビュー、画面表示の両方がおかしくなってしまうはずだ。酷いね。
画面キャプチャ (475 by 390 pixels, 33.3KB)
CSSは、ファイルのhead内のstyle要素でmedia="screen"を指定した上で、以下のようにしている。
html>body h1 {
margin: 0;
font-size: 16px;
height: 64px;
}
h1+* {
position: relative;
z-index: 2;
margin-top: -64px;
padding-top: 64px;
min-width: 320px;
background-image: url(title.gif);
background-repeat: no-repeat;
}h1+*（今回の場合はh2）に対し、screenメディア用には縦方向の負のマージンを指定している。一方、printメディア用は無指定なので、デフォルトのまま1emのマージンが入る、はずである。
ここで印刷プレビューをすると、画面表示も印刷プレビューも、h2にはマージンが合算されて、-64px+1emのマージンになってしまう。画面表示の方はもともとpadding-topもあるが、1em余分に加わったため背景画像が1段下にずれてしまう。背景画像でテキストを隠すはずが、テキストがこんにちはしてしまうのだ。印刷プレビューは、padding-topのないまま-64pxの上マージンが入るため、見事にh1よりも上に行ってしまい、字が重なる。
この問題は、横のマージンでは起きないようだ。また、両方ともプラスのマージン、または両方ともマイナスのマージンの場合は合算は起きない。
よって、解決方法は以下のようになる。マイナスのmarginを使う必要のないメディア用のCSSに、なんらかのマイナスのmarginとそれを相殺するプラスのpaddingを指定する。以上の例であれば、printメディア用のCSSを用意し
h1+* {
margin-top: -1px;
padding-top: 1px;
}とすれば、両方のメディアにマイナスのマージンを指定するので問題は起きなくなる。margin-top:0だと、相変わらず非負なのでマージンの合算が起きてしまう。場合によっては、これを知らないと大変なことになる。注意しよう。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/640